I've managed to create a tree structure for a sideBar Menu using this code, and it's working well. However, what I'm trying to achieve is that when a menu with submenus is expanded and the user clicks on another parent menu, the expanded submenu should collapse. Can anyone assist me with this?
<ng-container *ngTemplateOutlet="treeViewList; context: { $implicit: pageMenus }"></ng-container>
<ng-template #treeViewList let-list>
<ul>
<li *ngFor="let item of list">
<a (click)="item.isopen = !item.isopen">
<div>
<mat-icon>{{ item.menuIcon }}</mat-icon>
<span class="icon-text">{{ item.menuName }}</span>
</div>
<i class="fa fa-angle-right" [ngClass]="{ clicked: item.isopen }" aria-hidden="true"></i>
</a>
<ul *ngIf="item.children && item.isopen">
<ng-container *ngTemplateOutlet="treeViewList;context: { $implicit: item.children }">
</ng-container>
</ul>
</li>
</ul>
</ng-template
Here's the payload:
pageMenus = [
{
"menuName": "Dashboard",
"menuIcon": 'dashboard',
"path": "",
"children": [
{
"menuName": "Status",
"menuIcon": "",
"path": "/dashboard",
}
]
}, {
"menuName": "Database",
"menuIcon": 'layers',
"path": "",
"children": [
{
"menuName": "Users",
"menuIcon": "",
"path": "/user",
},
{
"menuName": "Devices",
"menuIcon": "",
"path": "/device",
},
{
"menuName": "Sessions",
"menuIcon": "",
"path": "/session",
}
]
}
]