-2

I am using Angular 8 with Angular Material to build a multi-level menu that is 3 levels deep.

E.g.

One -> Two -> Three

StackBlitz Example:

https://stackblitz.com/edit/dynamic-sidenav-multi-level-menu-u93fqt?file=app%2Fapp.component.html

Does anyone know how I can solve this? I want to stop the list of items from closing automatically, i.e. to display item Three.

nash11
  • 8,220
  • 3
  • 19
  • 55
Richard
  • 8,193
  • 28
  • 107
  • 228

1 Answers1

1

Remove the mat-list-item Element from the submenus and place matMenuTriggerFor on the button with the mat-menu-item decorator instead:

<mat-menu #menu1="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="menu2">Two</button>
</mat-menu>

Your full example: https://dynamic-sidenav-multi-level-menu-cnarmb.stackblitz.io

user11964644
  • 64
  • 1
  • 4