Angular 5 Material Multiple mat-menu

The correct solution for this problem:

@ViewChildren(MatMenuTrigger) trigger: QueryList<MatMenuTrigger>;

//And call:


I had the same issue.

Create two separate components, each will then contain its own mat-menu and will not affect the other.

<!-- component1 -->
 <button mat-button [matMenuTriggerFor]="menu1" 
 <mat-menu #menu1="matMenu" overlapTrigger="false">
    <span (mouseleave)="closeMyMenu()">
        <button mat-menu-item>Item 1</button>
        <button mat-menu-item>Item 2</button>

<!-- component2 -->
<button mat-button [matMenuTriggerFor]="menu2"
<mat-menu #menu2="matMenu" overlapTrigger="false">
    <span (mouseleave)="closeMyMenu()">
        <button mat-menu-item>Item 3</button>
        <button mat-menu-item>Item 4</button>

I have two matmenus in my toolbar each one is a separate component and triggers a separate matmenu.

See images below:

enter image description here

Here is my notifications component(component 1 in the image above)
In my editor view :

enter image description here

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>

<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.