Material Angular,Material Angular Menu,Dynamic Material Angular Menu

Dynamic Angular Material Menu

Refer Basics of Angular Material Menu from Material.IO

Refer Angular Material Menu's Focus Idea

Here we discussed Material Angular Menu's Dynamic Binding

Import Material Angular MenuAPI 

import {MatMenuModule} from '@angular/material/menu';

Directives Used

MatMenu, MatMenuItem, MatMenuTrigger

Step 1 :  Create SubmenuitemsComponent

ng g c Submenuitems

Step 2:In SubmenuitemsComponent.ts 

@Input() SubMenuItems: Array<MenuItem>;
@ViewChild('Submenuitem') public Submenuitem;
@Output() SelectedMenu: EventEmitter<MenuItem> = new EventEmitter();
clickeventhandler(menu) {
this.SelectedMenu.emit(menu);
}

Step 3:In SubmenuitemsComponent.html

<mat-menu #Submenuitem="matMenu" [overlapTrigger]="false" >
  <div *ngFor="let submenu of SubMenuItems" >
<span *ngIf="submenu.SubMenuItems && submenu.SubMenuItems.length > 0" >
    <button  mat-menu-item   [matMenuTriggerFor]="secondsubmenu.Submenuitem">
      <span>{{submenu.Name}}</span>
    </button>
      <app-submenuitems  (SelectedMenu)="clickeventhandler($event)"  #secondsubmenu [SubMenuItems]="submenu.SubMenuItems" ></app-submenuitems>
</span>
<span *ngIf="!submenu.SubMenuItems || submenu.SubMenuItems.length === 0" >
  <!-- <button  mat-menu-item  (click)="clickeventhandler(submenu)" [routerLink]="submenu.Value" > -->
    <button  mat-menu-item  (click)="clickeventhandler(submenu)">
      <span>{{submenu.Name}}</span>
    </button>
</span>
</div>
</mat-menu>

in submenuitems.component.html to handle menus submenu (Selector Tag: app-submenuitems ) used with input parameter SubMenuItems and output parameter SelectedMenu type of event emitter for IO.

Step 4: In AppComponent.ts 

to handle the menu click event, i.e emitted from  <app-submenuitems> 

selectedmenudetail: any
 clickeventhandler(menu) {
   this.selectedmenudetail = menu
} 

Step 5: Create Menu Array

Create menuitem's Array as below 

export class MenuItem {
  Name: string = '';
  Value: string;
  SubMenuItems: Array<MenuItem> = new Array<MenuItem>();
  matmenuname: string ='';
}
export class MenuItems {
  AllMenus: Array<MenuItem> = new Array<MenuItem>();
  MainMenu1 : MenuItem = new MenuItem();
  MainMenu2 : MenuItem = new MenuItem();
CreatethirdOrdermenu(index: number): Array<MenuItem>{
    let SendOrdersubMenu: Array<MenuItem> = new Array<MenuItem>();
    for (let i: number = 1; i <= 3; i++) {
        let Submenu: MenuItem = new MenuItem();
        Submenu.Name = 'third Order Sub Menu Index '+index +', on ' + i;
        Submenu.Value = 'third Order Sub Menu Action Index '+index +', on ' + i;
        SendOrdersubMenu.push(Submenu);
      }
      return SendOrdersubMenu;
   }
  CreateSecondOrdermenu(index: number): Array<MenuItem>{
    let SendOrdersubMenu: Array<MenuItem> = new Array<MenuItem>();
    for (let i: number = 1; i <= 3; i++) {
        let Submenu: MenuItem = new MenuItem();
        Submenu.Name = 'Second Order Sub Menu Index '+index +', on ' + i;
        Submenu.Value = 'Second Order Sub Menu Action Index '+index +', on ' + i;
        if (index%2) {
          Submenu.SubMenuItems =  this.CreatethirdOrdermenu(i);
        }
        SendOrdersubMenu.push(Submenu);
      }
      return SendOrdersubMenu;
   }
  constructor() {
    this.MainMenu1.Name = 'Dynamic Main Menu 1';
    this.MainMenu1.Value = '';
    this.MainMenu1.matmenuname='Dynamic1';
    for (let i: number = 1; i <= 10; i++) {
      let Submenu: MenuItem = new MenuItem();
      Submenu.Name = 'Dynamic sub menu On 1 as ' + i;
      Submenu.Value = 'sub menu action ' + i;
      Submenu.SubMenuItems= this.CreateSecondOrdermenu(i);
      this.MainMenu1.SubMenuItems.push(Submenu);
    }
    this.AllMenus.push(this.MainMenu1);
    this.MainMenu2.Name = 'Dynamic Main Menu 2';
    this.MainMenu2.Value = '';
    this.MainMenu2.matmenuname='Dynamic2';
    for (let i: number = 1; i <= 10; i++) {
      let Submenu: MenuItem = new MenuItem();
      Submenu.Name = 'Dynamic sub menu on 2  ' + i;
      Submenu.Value = 'sub menu action ' + i;
      this.MainMenu2.SubMenuItems.push(Submenu);
    }
    this.AllMenus.push(this.MainMenu2);
  }
}

Step 5: In appcomponent.html

<div *ngFor="let basemenu of myMenuItems.AllMenus" >
<div>
<button mat-icon-button [matMenuTriggerFor]="submenu.Submenuitem">
<span>{{basemenu.Name}}</span>
</button>
<app-submenuitems  (SelectedMenu)="clickeventhandler($event)"  #submenu [SubMenuItems]="basemenu.SubMenuItems" ></app-submenuitems>
</div>
</div>

in appcomponent.html submenuitems(Selector Tag: app-submenuitems )used with input parameter SubMenuItems and output parameter SelectedMenu type of event emitter for IO.

Step 6: Enjoy the Creative Idea's Output

An output from Dynamic menu 1 

An output from Dynamic menu 2

An output from clickeventhandler invoked by submenuitems < app-submenuitems >

Code Action @ StackBlitz