'How to make a loop to retrieve the submenus of a menu?

I have two rubrics in my menu with several sub-menus.

I display the rubrics with a loop, but I don't know how to display the submenus in HTML via another loop...

TS file

menus: Menu[] = [{
    name: 'Back-end',
    iconClass: 'fas fa-desktop',
    active: false,
    submenu: [{
        name: 'RPG 3',
        url: '#'
    },
        {
            name: 'RPG 4',
            url: '#'
        }
    ]
},
    {
        name: 'Front-end',
        iconClass: 'fas fa-user-friends',
        active: false,
        submenu: [{
            name: 'HTML 5',
            url: '#'
        },
            {
                name: 'CSS 3',
                url: '#'
            }
        ]
    }

]

selectMenu(parentMenu: {
    name: string
}): void {
    this.menus.forEach(menu => {
        if (menu.name !== parentMenu.name) {
            menu.active = false;
        } else {
            menu.active = true;
        }
    })
}

HTML file

<div class="wrapper">
    <!-- Top Menu -->
    <div class="sidebar">
        <!-- Menu Item -->
        <ul>
            <li *ngFor="let menu of menus, let i = index" [class.active]="menu.active">
                <ng-container>
                    <a class="item" (click)="selectMenu(menu)">
                        <i [class]="menu.iconClass"></i> {{ menu.name }}
                        <i class="fa fa-chevron-down"></i>
                    </a>
                </ng-container>
            </li>
        </ul>
    </div>
</div>

I made a reproduction here.

If you have a solution, I'm really interested.

Thanks

angular

Solution 1:^[1]

Something like this:

<div class="wrapper">
  <!-- Top Menu -->
  <div class="sidebar">
    <!-- Menu Item -->
    <ul>
      <li
        *ngFor="let menu of menus; let i = index"
        [class.active]="menu.active"
      >
        <ng-container>
          <a class="item" (click)="selectMenu(menu)">
            <i [class]="menu.iconClass"></i> {{ menu.name }}
            <i class="fa fa-chevron-down"></i>
            <ul *ngIf="menu.active">
              <li *ngFor="let submenu of menu.submenu">
                <a [href]="submenu.url"> {{ submenu.name }} </a>
              </li>
            </ul>
          </a>
        </ng-container>
      </li>
    </ul>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	alin0509

'How to make a loop to retrieve the submenus of a menu?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]