How to stop close mat-menu on click inside area in Angular?

Question

Here i am using a material mat-menu, when i am click to select my option than mat-menu is close it self.

Reference link of material mat-menu: Click Here

Image 1

Image 2 - After click

If i am going to select my option than dropdown is close on select. So i want close that on Apply button.

Answer 1

You can disable closing for each mat-menu-item by adding $event.stopPropagation(); for onClick event and for your Apply button you can add a real handler with required job. Because all items besides the Apply button won't react on click, the Apply button will close it the menu.

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="$event.stopPropagation();">
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled (click)="$event.stopPropagation();">
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item (click)="$event.stopPropagation();">
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
  <!-- the button below will close the meny-->
  <button mat-menu-item (click)="selectOption($event)">
    <mat-icon>apply</mat-icon>
    <span>Apply</span>
  </button>
</mat-menu>

Here is a full example.