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>