I am currently developing an Angular 8 app and utilizing a bootstrap 4 layout in my project. One of the features I am working on is a menu with nested items, inspired by the Dynamic Expanding Nav Drawer example.
The challenge I am encountering is that when I click on a parent menu item, it expands all the nested items, which is not the behavior I desire.
Below is the code snippet I have attempted:
<div class="row">
<div *ngTemplateOutlet="recursiveMenu; context:{ $implicit: navItems }"></div>
<ng-template #recursiveMenu let-menus>
<ul class="w-100">
<li *ngFor="let menu of menus;">
<a class="align-self-stretch text-left" href="#" title="{{menu.displayName}}" (click)="onItemSelected(menu)">
<i class="fa {{menu.iconName}}"></i> <span class="nav-header-primary p-2">{{menu.displayName}}</span>
<span *ngIf="menu.children" class="fa fa-caret-down fa-2x pull-right" [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
</span>
</a>
<ul *ngIf="menu.children && expanded" id="nav{{menu.id}}">
<ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: menu.children }"></ng-container>
</ul>
</li>
</ul>
</ng-template>
</div>
If you could provide assistance, here's the code output at this stackblitz link. Please let me know where I may be going wrong.