Dismiss mat-sidenav on click outside

I'm trying to close my sidebar whenever user clicks somewhere not in it. I've tried two-way data-binding and now I'm trying with rxjs' Subject

AppTemplate


<app-sidenav [openedSubject]="openedSubject"></app-sidenav>

AppComponent


openedSubject = new Subject<boolean>();

@HostListener('click', ['$event']) clickedInside($event) {
this.openedSubject.next(false);
}

SidenavComponent


@Input() openedSubject: Subject<boolean>;
@ViewChild('sidenav') sidenav: MatSidenav;

ngAfterContentInit() {
this.openedSubject.subscribe(opened => {
if(this.sidenav.opened) opened || this.sidenav.toggle();
});
}

toggle() {
this.openedSubject.next(!this.sidenav.opened);
}

SidenavTemplate


<mat-sidenav-container>
<mat-sidenav #sidenav><mat-toolbar color="primary">Menu</mat-toolbar>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button (click)="toggle()">toggle</button>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>


https://stackblitz.com/edit/ng-sidenav-experiments


But there seems to be a logic error. The click event covers the whole document, whereas it should exclude the sidenav and toolbar.

Continue reading...