Angular material sidenav with flex-layout - Not able to route to different pages

Question

Need help on how to route to different pages when I click on hyper links (when the browser is full window and not full window, that means the menu at the right top corner).

Created this stackblitz.

Do I must need mat-sidenav-content fxFlexFill and provide height mat-sidenav-container

.mat-sidenav-container{
  background-color: lightskyblue;
  min-height: 93vh !important;
}

<div> 
  <mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>

    <a mat-button class="companyName" routerLink="/">
      <span>Site name</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/about">About us</a>
      <a mat-button routerLink="/prices">Prices</a>
      <a mat-button routerLink="/start-page">Start page</a>
      <a mat-button routerLink="/offer">Offer</a>
      <a mat-button routerLink="/contact">Contact</a>
    </div>

  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">

    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <a mat-button routerLink="/about">About us..</a>
        <a mat-button routerLink="/prices">Prices</a>
        <a mat-button routerLink="/start-page">Start page</a>
        <a mat-button routerLink="/offer">Offer</a>
        <a mat-button routerLink="/contact">Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      Awesome content
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

Do you have an issue ? It seems to work and you don't ask any question ... — user4676340
@trichetriche - Yes, I had the question and it was "how to route to different pages when I click on hyper links" — SK.

Teun van der Wijst Teun van der Wijst · Accepted Answer · 2018-11-20T15:04:01

Your problem isn't actually a problem. The reason your not seeing the router work is because you are rendering an element on top of your router outlet

<div> 
  <mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>

    <a mat-button class="companyName" routerLink="/">
      <span>Site name</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/about">About us</a>
      <a mat-button routerLink="/prices">Prices</a>
      <a mat-button routerLink="/start-page">Start page</a>
      <a mat-button routerLink="/offer">Offer</a>
      <a mat-button routerLink="/contact">Contact</a>
    </div>

  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">

    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <a mat-button routerLink="/about">About us..</a>
        <a mat-button routerLink="/prices">Prices</a>
        <a mat-button routerLink="/start-page">Start page</a>
        <a mat-button routerLink="/offer">Offer</a>
        <a mat-button routerLink="/contact">Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      Awesome content // <-- RIGHT HERE should be router outlet, this is what is displayed as the main 'content'
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

so change

<mat-sidenav-content fxFlexFill>
   Awesome content
</mat-sidenav-content>

to

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

Angular material sidenav with flex-layout - Not able to route to different pages

1 Answers