ERROR Error: mat-menu-trigger: must pass in an mat-menu instance

Question

I am trying to create a menu top of my page using mat-menu and matMenuTriggerFor, I found an example in material website(https://material.angular.io/components/menu/examples) and tried to implement it, everything works fine buut I am getting following error.

ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.
Example:
  <mat-menu #menu="matMenu"></mat-menu>
  <button [matMenuTriggerFor]="menu"></button>"

in the console. I don't know the reason. Anyone know the solution?

Answer 1

I know it too late but i got same error, and use this dynamic Menu Demo ,for anyone who use angular 6 and above open menuitem.component file you need to change this :

  @ViewChild('childMenu') public childMenu;

to this :

  @ViewChild('childMenu', {static: true}) public childMenu: any;

make sure you make {static: true} cause in my case it was false and give me this error.

i hope this help

Answer 2

Issue solved, so apparently it was not related to the example in material website and opposite of what Muhammed explained happened. I had few buttons before menu which had [matMenuTriggerFor]="home" aaand I didn't have any mat-menu to refer to them. my code was like this:

<button mat-button [matMenuTriggerFor]="home" >Home</button>
<button mat-button [matMenuTriggerFor]="edit">Sources</button>
<button mat-button [matMenuTriggerFor]="sources">Sources</button>
<!--the example from material website-->
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

and it was throwing error I mentioned above, now I changed the code and deleted unused [matMenuTriggerFor] in first three button and issue solved. the working code is :

<button mat-button >Home</button>
<button mat-button >Sources</button>
<button mat-button >Sources</button>
<!--the example from material website-->
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Answer 3

I had this error and I relized that my problem was with *ngIf. here is my mat-menu

 <mat-menu #menu="matMenu" *ngIf="user.userType==2">
    <button mat-menu-item><a>Profile</a></button>
    <button mat-menu-item><a>Settings</a></button>
 </mat-menu>
 <button mat-raised-button *ngIf="user.userType==2" [matMenuTriggerFor]="menu">Hello</button>

that somehow made him confused, I am quite beginner to material, but I guess he was not sure what is going to happen when just one condition will be true... so I changed it easily to:

<div *ngIf="user.userType==2">
 <mat-menu #menu="matMenu">
    <button mat-menu-item><a>Profile</a></button>
    <button mat-menu-item><a>Settings</a></button>
 </mat-menu>
 <button mat-raised-button [matMenuTriggerFor]="menu">Hello</button>
</div>

Answer 4

This proplem accure when the [matMenuTriggerFor] directive don't have a reference (template variable) to mat-menu component for example this will throw the same error in the console

<button mat-button [matMenuTriggerFor]="">Menu</button>
<mat-menu #menu>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

or you may just addd the directive like this [matMenuTriggerFor]

the proper solution will be like this

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>