Угловое и материальное многоуровневое меню с некорректной работой

Question

Я работаю с угловым 6 и угловым материалом 6. Здесь я пытаюсь создать многоуровневое меню с хлебными крошками. Я правильно работал с многоуровневым меню, но не могу перемещаться по меню с выбранной крошкой. Когда я нажимаю на выбранную крошку, меню не организуется должным образом.

Моя демонстрационная ссылка: здесь ссылка на стек

Answer 1

@ Кришна Раторе большое спасибо за ваше решение. Я просто изменил несколько вещей:

• используется материал sidenav и список материалов;
• иконки как панировочные сухари;
• также возможно использование значков шрифта.

Вот разветвленная ссылка stackblitz .

Подумал, что я должен написать здесь, чтобы дать вам кредиты и помочь всем, кто придет.

Answer 2

@ привет Монир Тухин

Вы можете попробовать это решение.

У меня есть демо на 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>