One section of my code is located in sidebar.component.html :
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a class="nav-link" [routerLink]="[menuItem.path]">
<i class="material-icons">{{menuItem.icon}}</i>
<p>{{menuItem.title}}</p>
</a>
<ng-container *ngIf="menuItem.children && menuItem.children.length > 0">
<ul class="nav">
<li routerLinkActive="active" *ngFor="let childmenu of menuItem.children"
class="{{menuItem.class}}">
<a class="nav-link" [routerLink]="[childmenu.path]">
<p>{{childmenu.title}}</p>
</a>
</li>
</ul>
</ng-container>
</li>
</ul>
In addition, this snippet can be found in sidebar.component.css :
export const ROUTES: RouteInfo[] = [
{ path: '/dashboard', title: 'dashbord', icon: 'dashboard', class: '', children: '' },
{
path: '/user-List', title: 'Parent', icon: 'apps', class: '', children: [
{ path: '#', title: 'Child Menu 1', icon: 'dashboard', class: '' },
{ path: '#', title: 'Child Menu 2', icon: 'add_shopping_cart', class: '' },
{ path: '#', title: 'Child Menu 3', icon: 'sports_soccer', class: '' },
]
}
];
I am looking for assistance on how to show/hide a submenu when it's clicked. Can you help me with this?