Close matMenu on Dialog Open?

Question

I am triggering a dialog on clicking an item in matMenu but the concern is that matMenu doesn't close when dialog is open. I want it to close it as soon as dialog box opens up, it closes when you click somewhere in the page, but I want it to close once dialog box opens.

this is the code-snippet for matMenu.

  <button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" (mouseup)="menuTrigger.closeMenu()">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu" xPosition="before" >
    <button mat-menu-item (click)="openUpdateQuestionDialog($event,currentSelectedQuestion)">
      Edit
    </button>
    <button mat-menu-item (click)="confirmDeleteQuestion($event,currentSelectedQuestion)">
      Delete
    </button>
  </mat-menu>

I am trying different ways to make it work, but no luck.

Answer 1

There are a couple of options for closing the mat menu (mat menu trigger).

From the docs, you can use the matMenuTrigger from the ts via a "child" decorator (ViewChild or ContentChild potentially based on your location of the menu to the functionality):

class MyComponent {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  someMethod() {
    this.trigger.closeMenu(); // <-- put this in your dialog open method
  }
}

I did not test this, but it may also be possible to call the close from the template as well:

<button mat-menu-item
  (click)="openUpdateQuestionDialog($event,currentSelectedQuestion) && menuTrigger.closeMenu()"
>