The Angular Material documentation shows us the markup for mat-menu:

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
</mat-menu>

But does not show how to capture which mat-menu-item was selected. How do we do this?

The Angular Material documentation shows us the markup for mat-menu:

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
</mat-menu>

But does not show how to capture which mat-menu-item was selected. How do we do this?

• javascript
• angular
• typescript

• what do you want to achieve? – Lia Commented Dec 16, 2019 at 16:12
• Just needed to identify which menu item was selected in the even handler. – Ole Commented Dec 16, 2019 at 19:57

1 Answer 1

I have not found it in Angular documentation, but as you have used button in mat-menu-item, you can use its click event to capture the selected value like below

<button mat-menu-item (click)="selectedMenu('Redial')">
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>