Angular 5 Material Multiple mat-menu
The correct solution for this problem:
@ViewChildren(MatMenuTrigger) trigger: QueryList<MatMenuTrigger>;
//And call:
me.trigger.toArray()[indexOfMenu].openMenu();
I had the same issue.
Create two separate components, each will then contain its own mat-menu and will not affect the other.
<!-- component1 -->
<div>
<button mat-button [matMenuTriggerFor]="menu1"
(mouseenter)="openMyMenu()">Trigger1</button>
<mat-menu #menu1="matMenu" overlapTrigger="false">
<span (mouseleave)="closeMyMenu()">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</span>
</mat-menu>
</div>
<!-- component2 -->
<div>
<button mat-button [matMenuTriggerFor]="menu2"
(mouseenter)="openMyMenu()">Trigger2</button>
<mat-menu #menu2="matMenu" overlapTrigger="false">
<span (mouseleave)="closeMyMenu()">
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
</span>
</mat-menu>
</div>
I have two matmenus in my toolbar each one is a separate component and triggers a separate matmenu.
See images below:
Here is my notifications component(component 1 in the image above) In my editor view :
In my notifications.component.html file :
<button mat-icon-button [matMenuTriggerFor]="notificationsMenu" (mouseover)="openNotifications()">
<mat-icon class="material-icons ele-text-color-grey">notifications</mat-icon>
</button>
<mat-menu #notificationsMenu="matMenu" [overlapTrigger]="false"></mat-menu>
I don't think it is possible to have two in one component but I hope this helps.