StopPropagation sur Mat-Menu à l'exception de certains événements de clic - Angular

Question

J'ai implémenté une application angulaire (@latest version), dans mon implémentation j'ai utilisé un mat-menu pour montrer un composant personnalisé qui contient quelques options personnalisées avec un bouton d'application. Par défaut, si nous cliquons dans le menu popover, il se ferme immédiatement. J'ai donc ajouté un bouton stopPropagation sur mon composant personnalisé pour empêcher la fermeture de l'action popover.

Mais j'ai besoin de fermer le menu pop-over sur l'événement de clic du bouton d'application. Mais cela échoue parce que le stopPropagation dans le niveau parent empêche l'action de fermeture du bouton.

Comment échapper à stopPropagation uniquement pour le bouton spécifié.

Stackblitz URL : https://stackblitz.com/edit/angular-mat-menu-stop-propagation?embed=1

Fichier : app.component.html

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

Fichier : 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...');
  }
}

Fichier : 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>

Note : Si j'ajoute le stopPropagation à la case à cocher, il ferme la pop-over si je clique en dehors de la case à cocher. Donc, j'ai ajouté dans le composant de niveau.

Aidez-moi, s'il vous plaît, comment échapper à stopPropagation uniquement pour les " Appliquer bouton ".

Answer 1

Retirer le stopPropagation sur <menu-toolbar></menu-toolbar> et le mettre sur le div comme ça :

<div (click)="$event.stopPropagation()">
    <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>