CODEWITHSUNDEEP
javascripthtmlangularangular-material
Nehal Damania
Nehal Damania

Reputation: 9008

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

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>

Upvotes: 30

Views: 18762

Answers (1)

Kalamarico
Kalamarico

Reputation: 5656

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>

Upvotes: 54

Related Questions