Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
114
rated 0 times [  117] [ 3]  / answers: 1 / hits: 17020  / 6 Years ago, fri, april 13, 2018, 12:00:00

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 (openscloses). 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>

More From » html

 Answers
9

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>

[#54671] Tuesday, April 10, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ingridcassieb

Total Points: 346
Total Questions: 97
Total Answers: 125

Location: North Korea
Member since Fri, Nov 4, 2022
2 Years ago
;