set [matMenuTriggerFor] dynamically

Question

I am trying to set matMenuTriggerFor]="getMenuName(menuItem)" dynamically, this is what I am trying:

<button mat-icon-button  [matMenuTriggerFor]="getMenuName(menuItem)">
   <mat-icon>{{ menuItem.icon }}</mat-icon>
</button>

<mat-menu #navmenu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

getMenuName(menuItem) {
    console.log(menuItem);
    return 'navmenu';
}

It is displaying properly, but when i click on button, it is giving errorcore.js:6150 ERROR TypeError: Cannot read property 'createEmbeddedView' of undefined.

Please help how can i do that.

Answer 1

your getMenuName() is simply returning a string. which is not a desired argument for [matMenuTriggerFor] directive. You need to set the reference of the MatMenu as a value for the matMenuTriggerFor directive.

In your code I can see that you have exported matMenu to the in the tamplate variable named navmenu.

now to dynamicaly attache this menu with it's trigger you need to take the reference of this navmanu inside your component class using the @ViewChild decorator.

So in your component declare a variable as follows.

@ViewChild('navmenu', {static: true}) navMenu:MatMenu;

Notice that we have used static: ture property here. Because we want to access our MatMenu dynamically while the templet is rendering. read more about it here: https://stackoverflow.com/a/56359612/1160236

Now return this navMenu from your getMenuName() method.

getMenuName(menuItem) {
    console.log(menuItem);
    return this.navMenu;
}

Note. You can rename this method to getMenu() as we are returning the whole menu object and not just its name.

Please see the stackblitz demo here: https://stackblitz.com/edit/angular-qhzq8v?file=src/app/menu-overview-example.ts

Answer 2

You just return a string for your menu trigger, what you actually need to do is return the component itself, you can do it by referencing the menu panel with ViewChild and return that in your function like so

@ViewChild("menu") menu: MatMenuPanel;

getMenu() {
  return this.menu;
}

Working example: https://stackblitz.com/edit/angular-vs5ha5?file=src%2Fapp%2Fmenu-overview-example.ts