collapsible navigation menu angular

Question

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.