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

Share Improve this question Follow asked Dec 16, 2019 at 15:57 OleOle 47.6k7070 gold badges238238 silver badges447447 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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>