Bootstrap list activating both menu in angular 13 on selecting

Question

<ul class="nav">        
    <li class="nav-item" *ngFor="let menu of menuList">

      <a class="nav-link" href="index.html" *ngIf="menu.subMenu?.length<1">
        <i class="icon-grid menu-icon"></i>
        <span class="menu-title">{{menu.title}}</span>
      </a>

      <a class="nav-link"  *ngIf="menu.subMenu?.length>0" data-toggle="collapse"
         href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
        <i class="icon-layout menu-icon"></i>
        <span class="menu-title">{{menu.title}}</span>
        <i class="menu-arrow"></i>
      </a>
      <div class="collapse" id="ui-basic" *ngIf="menu.subMenu?.length>0">
        <ul class="nav flex-column sub-menu">
          <li class="nav-item" *ngFor="let sub of menu.subMenu">
            <a class="nav-link">
              {{sub.title}}
            </a>
          </li>              
        </ul>
      </div>
    </li>
  </ul>


   export const SideBarMenu = [
     {
    id: 'dashboard',
    title: 'Dashboard',
    icon: 'icon-grid menu-icon',
    url: '',
  },
  {
    id: 'task',
    title: 'Task',
    icon: 'icon-layout menu-icon',
    url: '',
    subMenu: [
      {
        id: 'task1',
        title: 'Task 1',
        icon: '',
        url: '',
       },
      {
        id: 'task2',
        title: 'Task 2',
        icon: '',
        url: '',
      },
    ],
  },
  {
    id: 'scheduler',
    title: 'Scheduler',
    icon: 'icon-layout menu-icon',
    url: '',
    subMenu: [
      {
        id: 'calendar',
        title: 'Calendar',
        icon: '',
        url: '',
       },
       {
        id: 'scheduler',
        title: 'Scheduler',
        icon: '',
        url: '',
      },
      {
        id: 'orders',
        title: 'Orders',
        icon: '',
        url: '',
       },
       {
        id: 'users',
        title: 'Users',
        icon: '',
        url: '',
       },
       {
        id: 'sales',
        title: 'Sales',
        icon: '',
        url: '',
       },
     ],
   },
 ];

Hi, I have created bootstrap sidebar here if i click on list its activating other menu also (please refer image 2) how to solve this . sorry if you don't understand question please refer image for clarification .

i am using ngFor loop to display all the sidebar menu if i select any one menu its also activating other menu also please help me to find the solution.

Answer 1

You should create unique ids for the menus something like this 'ui-basic'+index

<ul class="nav">        
    <li class="nav-item" *ngFor="let menu of menuList; let index = index"">
      <a class="nav-link" href="index.html" *ngIf="menu.subMenu?.length<1">
        <i class="icon-grid menu-icon"></i>
        <span class="menu-title">{{menu.title}}</span>
      </a>
      <a class="nav-link"  *ngIf="menu.subMenu?.length>0" data-toggle="collapse"
         href="#ui-basic" aria-expanded="false" [aria-controls]="'ui-basic'+index">
        <i class="icon-layout menu-icon"></i>
        <span class="menu-title">{{menu.title}}</span>
        <i class="menu-arrow"></i>
      </a>
      <div class="collapse" [id]="'ui-basic'+index" *ngIf="menu.subMenu?.length>0">
        <ul class="nav flex-column sub-menu">
          <li class="nav-item" *ngFor="let sub of menu.subMenu">
            <a class="nav-link">
              {{sub.title}}
            </a>
          </li>              
        </ul>
      </div>
    </li>
  </ul>