Angular material mat-sidenav-content click event issue

Question

When I put click event on mat-sidenav-content <mat-sidenav-content (click)="isNavBarOpened=false"> The mat-slide-toggle inside is not working.

Here is the example

Answer 1

Add $event.stopPropagation() on your mat-slide toggle component so that event will not get bubbled up.

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

Forked Example

Answer 2

Moving the set property value part to a function fixed the issue for me. This way, we need not touch event propagation order.

My guess is moving to function is adding extra CPU cycles and that delay is fixing the issue. But it is just a guess and open for explanations from experts.

<mat-sidenav-content (click)="closeNavBar()">

closeNavBar() {
this.isNavBarOpened=false;
}

Forked Example

Answer 3

Listen to the change event and toggle your boolean accordingly.

https://stackblitz.com/edit/angular-cvlqrt-qjc44x