Ytukyg

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>

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>