I'm currently working on creating a dynamic menu using Angular and Bootstrap for Angular. My main issue right now is that the submenus are overlapping each other when displayed on the page.
To tackle this problem, I started off by referring to the examples provided on the "Angular for Bootstrap" page here. I added *ngFor to make the menus dynamic, but I seem to have hit a roadblock with the buttons overlapping. Can anyone offer some guidance on how I can resolve this issue?
<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>Your help would be greatly appreciated. Thank you in advance.