Hide sidenav when routing to child component

Question

I have a home component with toolbar and sidenav (Angular Material design). I have three dropdowns on sidenav: 1. Country 2. State 3. City On selecting the city I route to nested child component and want to hide the sidenav also:

home.component.html

<mat-sidenav-content>
    <router-outlet></router-outlet>
</mat-sidenav-content>

home.component.ts

  selectCity(event) {
    this.store.dispatch(new GetCityDetails(event.value))
      .subscribe(res => {
        this.isHome = false;
        this._route.navigate(['home/citydetail']);
      });
  }

I use *ngIf to hide or show the sidenav.

The problem I'm facing is that if I set "isHome = false" then I don't get any error but angular doesn't load the citydetail component.

If I don't hide the sidenav then component loads up alright. I'm not sure what the issue is because I'm not getting any error also.

Please suggest the best way to hide the sidenav.

Answer 1

<!-- app.component.ts --->
constructor(private router: Router){

}

ngOnInit() {

this.router.events.subscribe((val) => {
  if (val instanceof NavigationEnd) {

    this.getUrl();
  }
});
}

getUrl(){
  this.selectedRoute = this.router.url;
}

Now in the app.component.html check the route is not equal to the route which you need to hide

<mat-sidenav *ngIf="selectedRoute !== '/child-route'></mat-sidenav>