Place app content inside mat-sidenav-content

Question

I have an app that uses FlexLayoutModule. I have a header that is responsive for both web and mobile however I am not sure how I should structure my app correctly. I want to add my app content inside the mat-sidenav-container.

header.component.html

<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>Wilderness Adventures</span>
      </a>
      <span class="example-spacer"></span>
      <div fxShow="true" fxHide.lt-md="true">
        <a mat-button routerLink="/about-us">Latest listings</a>
        <a mat-button routerLink="/prices">Experiences</a>
        <a mat-button routerLink="/start-page">Hot deal</a>
        <mat-icon>home</mat-icon>Become a host
      </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-us">Latest listings</a>
            <a mat-button routerLink="/prices">Experiences</a>
            <a mat-button routerLink="/start-page">Hot deal</a>
            <mat-icon>home</mat-icon>Become a host      
        </div>
      </mat-sidenav>
      <mat-sidenav-content fxFlexFill>
        <!--should app content go here-->
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>

app.component.html

<app-landing></app-landing>
<router-outlet></router-outlet>

Here is a full stackblitz of my app

https://stackblitz.com/edit/angular-ivy-gygw2g?file=src/app/app.component.html

If you see the app you will notice that my content sits below the mat-sidenav-container but I want to not have the blue block

Gérôme Grignon Gérôme Grignon · Accepted Answer · 2020-09-28T14:12:10

This part won't work as you want your landing page to be replaced when you navigate to another route :

<app-landing></app-landing>
<router-outlet></router-outlet>

Your Header component is more like a main/core component as it contains both the header and the mat-sidenav-container where your routed content will be displayed.

But keeping its name for the example, you can include it directly into your AppComponent, placing your router-outlet into its tags :

<app-header><router-outlet></router-outlet></app-header

Then you can use the content projection to place the router-outlet into the mat-sidenav-container :

<mat-sidenav-container>
  <ng-content></ng-content>
</mat-sidenav-container>

Finally, to display your landing page into your sidenav-container, declare a route to access it into your AppRoutingMOdule :

const routes: Routes = [{path: '', component: LandingComponent}]

and add a routerlink into the navbar of your HeaderComponent

Place app content inside mat-sidenav-content

1 Answers