Limitation des matériaux angulaires au basculement du panneau MatExapansionPanel en cliquant uniquement sur la flèche

Question

J'utilise Angular Material pour créer mes panneaux basculants. Je veux toujours que mon panneau se développe et se contracte lorsque je clique sur la flèche, mais pas lorsque je clique n'importe où dans l'en-tête du panneau parce que je veux ajouter une case à cocher en haut. Actuellement, lorsque je clique sur ma case à cocher, l'événement de basculement du panneau se déclenche lorsque je clique sur la case à cocher. L'événement "change" de la case à cocher se déclenche toujours par la suite.

Je ne vois pas d'inconvénient à ce que le panneau ne bascule que lorsque l'on clique sur sa flèche, mais comment empêcher le basculement du panneau de se déclencher lorsque l'on clique n'importe où dans le haut de l'écran ?

HTML

<mat-expansion-panel #panel
       (opened)="togglePanel()"
       (closed)="togglePanel()">
    <mat-expansion-panel-header>
        <mat-panel-title>
            <mat-checkbox (change)="onCheckChanged($event)">
                <label>Options 1</label>
            </mat-checkbox>
        </mat-panel-title>
        <mat-panel-description></mat-panel-description>
    </mat-expansion-panel-header>
</mat-expansion-panel>

TypeScript

togglePanel() {
    // this event fires before the onCheckChanged event
}

onCheckChanged(event: MatCheckboxChange) {
    // this event fires after the togglePanel event
}

Answer 1

Il y a actuellement une demande de fonctionnalité pour cela, qui date d'environ un an, donc je ne suis pas sûr de l'ETA... il semble y avoir quelques solutions de contournement avec lesquelles les gens jouent et qui pourraient aider, mais qui semblent avoir des critiques mitigées.

https://github.com/angular/material2/issues/8190

---

Révision

J'ai testé ce qui suit dans stackblitz et cela semble fonctionner.

HTML

<mat-accordion>
  <mat-expansion-panel #expansionPanel>
    <mat-expansion-panel-header (click)="expandPanel(expansionPanel, $event)">

Composant

 expandPanel(matExpansionPanel, event): void {
        event.stopPropagation(); // Preventing event bubbling

        if (!this._isExpansionIndicator(event.target)) {
          matExpansionPanel.close(); // Here's the magic
        }
      }

   private _isExpansionIndicator(target: EventTarget): boolean {
    const expansionIndicatorClass = 'mat-expansion-indicator';

    return (target['classList'] && target['classList'].contains(expansionIndicatorClass) );
  }

Stackblitz

https://stackblitz.com/edit/angular-5kugm3?embed=1&file=app/expansion-overview-example.html