Why my loop, loop twice in Angular/TypeScript?

Issue

To keep it simple, I created a menu and all of my bullet lists are stored in an array.

My problem is that when I run the loop it shows me 2 times, the same values ?? I do not understand why?

I think that the problem is in the HTML file?

admin.component.html

<div class="sidebar">
  <div class="logo-details">
    <i class="bx bxl-c-plus-plus"></i>
    <span class="logo_name">Menu</span>
  </div>
  <ul class="nav-links" *ngFor="let menu of menus; let i = index">
    <li>
      <a routerLink="market">
        <i class="bx bx-grid-alt"></i>
        <span class="links_name"> {{ menu.item }} </span>
      </a>
    </li>

    <li>
      <a routerLink="portfolio">
        <i class="bx bx-grid-alt"></i>
        <span class="links_name">{{ menu.item }} </span>
      </a>
    </li>
  </ul>
</div>
<section class="home-section">
  <nav>
    <div class="sidebar-button">
      <i class="bx bx-menu sidebarBtn"></i>
      <span class="dashboard">Dashboard</span>
    </div>
  </nav>
  <router-outlet></router-outlet>
</section>

TS

export class AdminComponent implements OnInit {
  showSubmenu: any[] = [];

  menus: any[] = [
    {
      item: 'Market',
      submenus: [{ item: 'Item' }],
    },
    {
      item: 'Portfolio',
      submenus: [{ item: 'Element' }],
    },
  ];

  constructor() {}

  ngOnInit() {}

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

I can not retrieve the index of each array? I can do this? If so... How, please?

https://stackblitz.com/edit/angular-ivy-9ytvbk?file=src/app/admin/admin.component.html

Solution

Please look at this solution :

https://stackblitz.com/edit/angular-ivy-1hnhqr?file=src/app/admin/admin.component.html

Answered By - Cheikh HAIBALA