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

Question

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

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>