How can we use multi custom Mat Menu?

Question

My application needs to use Multi custom menu. I can use this @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; code for a single mat menu. Please suggest me how can we achieve this for multi-menu and please find the example code for your reference.

menu-example.html

<button mat-button [matMenuTriggerFor]="menu" (mouseenter)="someMethod()">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item >User</button>
  <button mat-menu-item >Cards</button>
  <button mat-menu-item >About</button>
</mat-menu>

menu-example.ts

import {Component, ViewChild} from '@angular/core';

import { MatMenuTrigger } from '@angular/material';

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})
export class MenuOverviewExample {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  someMethod() {
    this.trigger.openMenu();
  }

}

My question is: how can use multi time for @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; and this.trigger.openMenu();

Will the below code work?

@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
@ViewChild(MatMenuTrigger) trigger01: MatMenuTrigger;
someMethod() {
    this.trigger.openMenu();
}
anotherMethod() {
    this.trigger01.openMenu();
}

Answer 1

EDIT: After thinking for a while, it appears that you're looking for a way to make the nested menu automatically appear if the menu item is hovered over.

What you can try to do is to pass in the menu trigger's reference into the showNestedMenu method (as shown in the code below):

<button mat-button [matMenuTriggerFor]="menu" (mouseenter)="showMenu()">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="userMenu" (mouseenter)="showNestedMenu(nestedMenuTrigger)" #nestedMenuTrigger="matMenuTrigger">User</button>
  <mat-menu #userMenu="matMenu">
    <button mat-menu-item>John Tan</button>
    <button mat-menu-item>Logout</button>
  </mat-menu>
  <button mat-menu-item>Cards</button>
  <button mat-menu-item>About</button>
</mat-menu>

import { MatMenuTrigger } from '@angular/material';

// ...
export class MyComponent {
  showNestedMenu(menu: MatMenuTrigger) {
    menu.openMenu();
  }
}

---

ORIGINAL ANSWER

If what you're asking for is a multi-menu/nested menu, this can be done by having another menu with a menu's trigger bound to the menu item:

<button mat-button [matMenuTriggerFor]="menu" (mouseenter)="someMethod()">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="userMenu">User</button>
  <mat-menu #userMenu="matMenu">
    <button mat-menu-item>John Tan</button>
    <button mat-menu-item>Logout</button>
  </mat-menu>
  <button mat-menu-item>Cards</button>
  <button mat-menu-item>About</button>
</mat-menu>

---

View the docs for more info.