Side Nav Toggle issue

[har5hit]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

After i'm redirected to home, i should be able to toggle Side Nav normally.

What is the current behavior?

If i come from login module and then navigate to home, the side nav toggle, doesnt work. But when i directly load home then it works perfectly

What are the steps to reproduce?

The demo is hosted here : https://crmdemo-41661.firebaseapp.com/

You can check. First you'll get the login and just enter a dummy email and password and click enter you'll be redirected to home and the side Nav toggle wont work.

Try refreshing the URL and then as you have logged in, it'll automatically load home and the side nav toggle will be working.

home.component.html

<div class="example-container">
  <mat-toolbar color="primary" class="example-toolbar">
    <button mat-icon-button (click)="snav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <h1 class="example-app-name">CRM App</h1>
  </mat-toolbar>

  <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item *ngFor="let nav of menuList" (click)="onMenuClick(nav)">{{nav}}</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <router-outlet #contentView></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

home.component.ts

import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, Component,OnInit} from '@angular/core';
import { AuthenticationService } from '../service/authentication.service';
import { Router,ActivatedRoute } from '@angular/router/';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  ngOnInit() {
  }

  mobileQuery: MediaQueryList;

  menuList=['dashboard','logout']

  private _mobileQueryListener: () => void;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, public loginService:AuthenticationService, public router:Router,public route: ActivatedRoute) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }

  public onMenuClick(item:String)
  {
    //if(item==='dashboard')
    //{
      //this.router.navigate([`../${item}`],{ replaceUrl: true , relativeTo : this.route})
      //this.router.navigate([`../${item}`])
      console.log(`${item}`)
      if(item==='logout'){
      this.loginService.logout()
      console.log(this.router.navigateByUrl('/login'),{ replaceUrl: true})
      return
      }
      console.log(this.router.navigateByUrl(`/home/${item}`))

      
  }
}

Specs:

Angular CLI: 1.6.1
Node: 8.9.3
OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.1
@angular/cli: 1.6.1
@angular/material: 5.0.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0