Prevent slide toggle in mat-expansion-panel-header from expanding the panel

Question

I have a mat-expansion-panel within my app that needs to have a slide-toggle within its header.

The issue is that when the slide toggle is toggled, the mouse event also activates the expansion panel's expand function. This means that with one click the slide toggle is changed and the panel expands, which isn't ideal.

I've tried to call $event.stopPropagation() but this has no effect. Is there a way to prevent this from happening?

<div>
    <mat-expansion-panel>
        <mat-expansion-panel-header class="card-padding" disabled="true">
            <div class="flex-row">
                <div class="align-center mr-md">
                    <mat-slide-toggle disableRipple="true" (change)="toggleChange($event)"></mat-slide-toggle>
                </div>
            </div>
        </mat-expansion-panel-header>
    </mat-expansion-panel>
</div>


toggleChange(event: any){
    event.stopPropagation(); //this does nothing 
  }

Alexis Alexis · Accepted Answer · 2020-08-20T12:20:56

You should use (click) instead of (change) and you can directly add it to the template like this

<mat-slide-toggle disableRipple="true" (click)="$event.stopPropagation()"></mat-slide-toggle>

Prevent slide toggle in mat-expansion-panel-header from expanding the panel

1 Answers