Angular Bootstrap dynamic dropdown menu overlaping

Question

I am trying to develop a dynamic menu with angular and bootstrap for angular. Specifically, I have been able to get the menus and submenus to display on the page, but the submenus are drawn on top of each other.

To do this development I have started from the examples on the page "Angular for Bootstrap" https://ng-bootstrap.github.io/stackblitzes/dropdown/basic/stackblitz.html, adding * ngFor to make it dynamic but I have run into the problem of overlapping the buttons. Could someone guide me on how I could fix the problem?

<div class="btn-group mr-3" *ngFor="let appMenu of appMenus">
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown" >
    <button class="btn btn-outline-primary" ngbDropdownToggle>{{ appMenu.appMenuName }}</button>
    <div class="dropdown-menu" *ngFor="let appMenuItem of appMenu.appMenuItemList" ngbDropdownMenu>
      <button ngbDropdownItem [routerLink]="appMenuItem.path">{{ appMenuItem.appMenuItemName }}</button>
    </div>
  </div>
</div>

Thank you very much in advance.

Answer 1

Solution is to put the *ngFor inside the button rather than the div:

<div class="btn-group mr-3" *ngFor="let appMenu of appMenus">
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown" >
    <button class="btn btn-outline-primary" ngbDropdownToggle>{{ appMenu.appMenuName }}</button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button *ngFor="let appMenuItem of appMenu.appMenuItemList" ngbDropdownItem [routerLink]="appMenuItem.path">{{ appMenuItem.appMenuItemName }}</button>
    </div>
  </div>
</div>

I think because you have the loop with ngbDropdownMenu in that div, it thinks you're trying to create a new menu for every iteration of the loop. So it's basically creating a ton of menus with one item and attaching them all to that one div.