Q: collapsible navigation menu angular I would like to create a collapsible navigation menu en angular.
I've looked on Google, but I don't have enough skill to figure out how to create this.
In the TS file, my code is presented like this:
export class DashboardComponent implements OnInit {

  selectedTab: string ;

  showSubmenu: any[] = [];
  showInfo: any[] = [];

  menus: any[] = [

    /* Administration */
    {
      class: 'bx bx-lock-alt',
      item: 'Administration',
      route: '/dashboard/administration',
      arrowDown: 'bx bx-chevron-down',
      arrowUp: 'bx bx-chevron-up',

      submenus: [
        {
          class: 'bx bx-key',
          item: 'Portfolio',
          route: '/administration/portfolio',
        },
        {
          class: 'bx bx-wallet',
          item: 'Corporate Action',
          route: '/administration/corporate-action',
        },
      ],
    },


    /* Market */
    {
      class: 'bx bx-chart',
      item: 'Market',
      route: '/dashboard/market',
      arrowDown: 'bx bx-chevron-down',
      arrowUp: 'bx bx-chevron-up',

      submenus: [
        {
          class: 'bx bx-coin-stack',
          item: 'Value',
          route: '/market/value',
        },
        {
          class: 'bx bx-line-chart',
          item: 'Indice',
          route: '/market/indice',
        },

      ],
    },

  ];

  constructor() { }

  ngOnInit() {}


  toggleMenu(index: number) {
    this.showSubmenu[index] = !this.showSubmenu[index];
  }

  toggleSubmenu(event: MouseEvent, item: any) {
    event.stopPropagation();
    this.showInfo[item] = !this.showInfo[item];
  }

}

Then, the HTML file is like this:
<ul class="nav-links" *ngFor="let menu of menus; let i = index">
  <li [ngClass]="{ selected: selectedTab === menu.route }">
    <a routerLink="{{ menu.route }}" routerLinkActive="active" (click)="toggleMenu(i); selectedTab = menu.route">
      <i class="{{ menu.class }}"></i>
      <span class="links_name"> {{ menu.item }} </span>
      <i class="{{ menu.arrowDown }} iconArrow" *ngIf="selectedTab !== menu.route || !showSubmenu[i]"></i>
      <i class="{{ menu.arrowUp }} iconArrow " *ngIf="selectedTab === menu.route && showSubmenu[i]"></i>
    </a>
  </li>

  <ng-container *ngFor="let submenu of menu.submenus; let j = index">
    <li *ngIf="showSubmenu[i]">
      <a routerLink="{{ submenu.route }}">
        <i class="{{ submenu.class }}"></i>
        <span class="links_name"> {{ submenu.item }} </span>
      </a>
    </li>
  </ng-container>
</ul>

I found examples on the internet, but the problem is that it doesn't work with my code, I couldn't adapt it correctly.
My project is available here here, if you want to help me.
Thank you for your time.

A: There're two aproach when mannage a list. Each element of the list is selected/not selected independiently (the we use an array) or only one element is selected at time (then we use a variable)
Only one elemnt select at time
indexSelected:number=-1

<ng-container *ngFor="let item of items;let i=index">
    <div (click)="indexSelected=i">
        <div [class.selected]="indexSelected==i">..</div>
    </div>
</ng-container>

We can to have some elements "selected" at time
indexSelected:boolean[]=[]

<ng-container *ngFor="let item of items;let i=index">
    <div (click)="indexSelected[i]=!indexSelected[i]">
        <div [class.selected]="indexSelected[i]">..</div>
    </div>
</ng-container>

Well, in general in this approach when our array "items" is an array of object  we use a "property" of "item" in the way
<ng-container *ngFor="let item of items;let i=index">
    <div (click)="item.selected=!item.selected">
        <div [class.selected]="item.selected">..</div>
    </div>
</ng-container>

