CODEWITHSUNDEEP
angularroutesangular-materialnavigationsidenav
Jonas Machado
Jonas Machado

Reputation: 130

Angular SideNav doesn't update content according to route

I'm trying to create a fixed sidenav that updates it's content according to the route. It doesn't work on navigation, only after refreshing the page. What am I doing wrong ?

App.component.ts

export class AppComponent {
  title = 'foo';
  showSideNav = false;

  constructor(private router: Router ) {

    this.router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        this.showSideNav = e.url != "/login";
      }
    });
  }
}

App.component.html

<app-header></app-header>

<mat-sidenav-container *ngIf="showSideNav">
  <mat-sidenav mode="side" opened>
  
      <h4 class="name">Foo</h4>
      <p class="designation">Barr</p>

      <mat-divider></mat-divider>
      <button mat-button class="menu-button" [routerLink]="['/baar']">
          <mat-icon>dangerous</mat-icon>
          <span>baar</span>
      </button>  
  </mat-sidenav>
  <mat-sidenav-content>
      <div class="content mat-elevation-z8">
          <router-outlet></router-outlet>
      </div>
  </mat-sidenav-content>
</mat-sidenav-container>

<router-outlet *ngIf="!showSideNav"></router-outlet>

Upvotes: 0

Views: 984

Answers (1)

Sathiya
Sathiya

Reputation: 239

change the routerlink as routerLink="/baar".check below code.

<app-header></app-header>

<mat-sidenav-container *ngIf="showSideNav">
  <mat-sidenav mode="side" opened>
  
      <h4 class="name">Foo</h4>
      <p class="designation">Barr</p>

      <mat-divider></mat-divider>
      <button mat-button class="menu-button" routerLink="/baar">
          <mat-icon>dangerous</mat-icon>
          <span>baar</span>
      </button>  
  </mat-sidenav>
  <mat-sidenav-content>
      <div class="content mat-elevation-z8">
          <router-outlet></router-outlet>
      </div>
  </mat-sidenav-content>
</mat-sidenav-container>

<router-outlet *ngIf="!showSideNav"></router-outlet>

Upvotes: 0

Related Questions