1

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

cheziHoyzer
  • 4,803
  • 12
  • 54
  • 81
  • what you are trying to achieve – Kiran Mistry Apr 22 '20 at 12:49
  • I want that each click outside the mat-sidenav will close the disenav, so I put click event on mat-sidenav-content, somewhere deeply inside the mat-sidenav-content I have mat-slide-toggle (not related to sidenav) and it's not working – cheziHoyzer Apr 22 '20 at 13:01

3 Answers3

2

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

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
  • Thanks, it's working, So I need to do it for each element I have in the application? I want that each click outside the mat-sidenav will close the disenav, so I put click event on mat-sidenav-content, maybe there is some different (elegant) solution for it? – cheziHoyzer Apr 22 '20 at 13:06
  • Bublling is happening since you have content projected mat-slide-toggle inside mat-drawer-content and having click event at parent component, that's is why child element click are getting bubbled up. if you have multipe mat-slide-toggle inside mat-drawer you could create custom directive to do the same thing. – Chellappan வ Apr 22 '20 at 13:15
0

Listen to the change event and toggle your boolean accordingly.

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

  • I don't want to close it by toggle, I just want that click on nav-conent anywhere will close the nav-bar, in my real application I have mat-slide-toggle somewhere inside the application (not related to side-nav at all) and it's not working – cheziHoyzer Apr 22 '20 at 12:57
  • Gotcha, in that case use the answer provided by Cehllappan. Consider being more specific when asking questions, good luck! –  Apr 22 '20 at 12:59
0

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

Jayanth
  • 31
  • 5