Utilizing Angular Material for my expanding panels, I am facing an issue with the toggling functionality. I would like the panel to expand and contract only when clicking on the arrow, not anywhere in the header area where I plan to place a checkbox. Currently, clicking on the checkbox triggers the toggling event of the panel before the 'change' event of the checkbox is executed.
I want to prevent the toggle action from firing when clicking on any part of the header except the arrow. How can I achieve this?
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
}