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

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


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>

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>