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.
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()"
>