Multi tool use

Angular and Material Multi-level Menu with Breadcrumb not working properly

I am working with angular 6 and angular material 6. Here i am trying to create multilevel menu with breadcrumb. I have worked multilevel menu with properly but can not able to navigate menu with selected breadcrumb. When i click on the selected breadcrumb then the menu not getting organized appropriately.

My demo link : stackblitz link here

1 Answer
1

@hi Monir tuhin

You can try this Solution.

I Have create a demo on Stackblitz.

Component.ts

breadCrumb(menu, index) {
console.log('sub breadCrumb');
this.menuHeader.splice(index + 1, this.menuHeader.length - 1);
if (menu[index] && menu[index].items && menu[index].items.length) {
this.appitemsTravel = menu[index].items;
}
}


Component.html

<mat-toolbar color="primary" style="height: 45px; font-size: 16px; font-weight: bold; color: #E6E8EA">
<span><a mat-button (click)="breadCrumbMain()" style="color: white;">Main</a></span>
<span *ngFor="let m of menuHeader; let indx = index" style="color: white;">
<a mat-button (click)="breadCrumb(menuHeader, indx)" >{{m.label}}
<mat-icon fxFlex="10">{{m.icon}}</mat-icon></a>
</span>
</mat-toolbar>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.