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?
mat-menu selector is used to display floating menu panel containing list of menu items.
The <mat-menu> acts as a kind of dropdown or menu section which expands or opens whenever user clicks on any button. Approach: First, install the angular material using the above-mentioned command. After completing the installation, Import 'MatMenuModule' from '@angular/material/menu' in the app.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With