How to prevent material menu from closing without user permission in angular 7

Question

I am having a mat-menu containing multiple checkboxes, and I want the user to close it when he checks all types of filter he wants.

The actual behavior is when you click on anything it will be automatically closed.

I have this code:

<button color="warn" mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-checkbox color="warn">
      By LM
    </mat-checkbox>&nbsp;
  </button>
  <button mat-menu-item>
    <mat-checkbox color="warn">
      By UN
    </mat-checkbox>&nbsp;
  </button>
</mat-menu>

I checked this post on stack overflow but the event didn't work.

And from the documentation, they said:

@Output() closed: EventEmitter

Event emitted when the menu is closed.

But I am not able to figure out how to use this output, and if it is even relevant to what I need.

Here is a stackblitz.

How to prevent mat-menu from closing without the user click outside of it?

Answer 1

I checked out your stackblitz and you can do:

<button mat-menu-item (click)="$event.stopPropagation();">

This will prevent it from closing.