how to reverse $event.stoppropogation() on button click of mat menu in angular 14

Question

I implemented an angular application (@latest version), in my implementation I used a mat-menu to show some custom component which contains some customized options along with a apply button. By default, if we do any click in the menu popover screen immediately it will close. So I added a stopPropagation on my custom component to prevent closing popover action.

But I need to close the menu pop-over on apply button click event. But its failing because the stopPropagation in the parent level prevents the button close action.

How to escape from stopPropagation only for the specified button.

File: app.component.html

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <menu-toolbar  (click)="$event.stopPropagation()"></menu-toolbar>
</mat-menu>

File: menu-toolbar.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'menu-toolbar',
  templateUrl: './menu-toolbar.component.html',
  styleUrls: [ './menu-toolbar.component.css' ]
})
export class MenuToolbarComponent  {
  name = 'Angular';

  applyChanges(): void {
    
    // some actions done

    console.log('Changes applied successfully...');
  }
}

File: menu-toolbar.component.html

<div>
    <mat-checkbox>Item #1</mat-checkbox>
    <mat-checkbox>Item #2</mat-checkbox>
    <mat-checkbox>Item #3</mat-checkbox>
</div>
<button mat-button (click)="applyChanges($event)">Apply</button>

please assist me how to escape from stopPropagation only for the "Apply" button click.

Answer 1

I put matMenuTrigger.closeMenu() in click event, that worked for me. (click)="Submit(column.value,column.businessName);matMenuTrigger.closeMenu()"