Prevent mat-expansion panel from toggling when mat-checkbox in Header clicked

Question

Can we prevent Expansion panel from toggling when checkbox inside header is clicked? Somehow stop the event propagation. Right now with below sample code, when the checkbox is clicked, the panel also toggles (opens\closes). Desired state is for expansion panel to toggle, when any area of header is clicked except the checkbox inside the header.

<mat-expansion-panel-header>   <mat-panel-title>     Panel Title   </mat-panel-title>   <mat-panel-description>      <mat-checkbox>Edit</mat-checkbox>   </mat-panel-description> </mat-expansion-panel-header> 

Answer 1

You can call the stopPropagation $event method when mat-checkbox is clicked:

<mat-expansion-panel-header>   <mat-panel-title>     Panel Title   </mat-panel-title>   <mat-panel-description>      <mat-checkbox (click)="$event.stopPropagation();">Edit</mat-checkbox>   </mat-panel-description> </mat-expansion-panel-header>