How to detect Material Menu open event

Question

I want to use menuOpened: EventEmitter property of angular material menu. Can anyone help how to use this? I want an Event on Menu open.

I am using Angular 6 with Angular Material Menu.

Answer 1

You put the listener on element that triggers the menu:

<button mat-icon-button [matMenuTriggerFor]="mMenu" (menuOpened)="menuOpened()">
  <mat-icon>edit</mat-icon>
</button>

<mat-menu #mMenu>
  <button mat-menu-item>...</button>
  <button mat-menu-item>---</button>
</mat-menu>

And in ts:

menuOpened() {
  console.log('Menu is open');
}

Answer 2

For those who are currently looking for a solution for Angular 8+, the solution is simpler. According to the documentation we should only use the following properties:

@Output()menuClosed: EventEmitter<void> - Event emitted when the associated menu is closed.

@Output() menuOpened: EventEmitter<void> - Event emitted when the associated menu is opened.

In HTML (div trigger)

<div class="user d-flex align-items-center border-left pl-4" (menuOpened)="menuOpened()" (menuClosed)="menuClosed()"
    [matMenuTriggerFor]="userProfile">
    <mat-icon class="icon-account">account_circle</mat-icon>
    <div class="d-flex flex-column mx-2">
      <span class="label-user">{{ profile?.fullname }}</span>
      <span class="label-role">{{ profile?.roles[0].name }}</span>
    </div>
    <mat-icon class="icon-arrow">keyboard_arrow_down</mat-icon>
  </div>

In HTML (mat-menu)

<mat-menu class="menu-card" [class]="'custom-panel-menu'" #userProfile="matMenu" yPosition="below" xPosition="before">
  <div class="d-flex flex-row px-3 pb-1 content-profile">
    <div class="options-user d-flex flex-column">
      <span class="username"></span>
      <div class="menu-user">
        <mat-list class="list-menu">
          <h3 class="primary-text" mat-subheader>{{ profile?.email }}</h3>
          <mat-list-item (click)="openOptionMenu(menu)" *ngFor="let menu of menus">
            <mat-icon class="menu-icon" mat-list-icon>{{ menu.icon}}</mat-icon>
            <span class="menu-item-text" mat-line> {{menu.name}} </span>

           ...
           ...
</mat-menu>

In TS:

 menuOpened() {
   console.log('menuOpened @configbug')
 }

 menuClosed() {
   console.log('menuClosed @configbug')
 }