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", adding * ngFor https://ng-bootstrap.github.io/stackblitzes/dropdown/basic/stackblitz.html 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 fontSize2rem" ngbDropdownToggle>{{ appMenu.appMenuName }}</button>
<div class="dropdown-menu" *ngFor="let appMenuItem of appMenu.appMenuItemList" ngbDropdownMenu>
<button ngbDropdownItem class="fontSize2rem" [routerLink]="appMenuItem.path">{{ appMenuItem.appMenuItemName }}</button>
</div>
</div>
</div>Thank you very much in advance.
Source: Angular Questions
