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.

The stackblitz link doesn't work. Is it public? What does the css look like? — Henrik Ståhlberg
– Henrik Ståhlberg, Commented Jan 14, 2021 at 21:57

Ethan Smith · Accepted Answer · 2022-05-09 02:52:32Z

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.

answered May 9, 2022 at 2:52

Ethan Smith

235 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Bootstrap dynamic dropdown menu overlaping

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related