Angular Material Sidenav rendered but not showing

Question

Currently I am building my own blog with angular 8 and angular material 8.

I have been trying to get my sidenav to work but it is not cooperating. Angular Material documentation says to wrap with . Ι have done this but whenever I toggle it, it is not showing

I have tried the following, where I have a toolbar for the desktop-tablet and a sidenav for the mobile, as I am going for a responsive website

<div>
    <mat-toolbar color="primary" class="fixed-header d-flex">
        <mat-toolbar-row>
            <button mat-icon-button (click)="sidenav.toggle()" fxHide.gt-sm>
                <mat-icon *ngIf="!sidenav.opened">menu</mat-icon>
                <mat-icon *ngIf="sidenav.opened">clear</mat-icon>
            </button>
            <div [routerLink]="'/'">
                <img src="assets/logo.svg" alt="img" width="40" height="30" align="top">
                <button mat-button disableRipple class="btn btn-outline-none">
                    <span class="font-xl">title</span>
                </button>
            </div>
            <span class="menu-space"></span>
            <div fxShow="true" fxHide.lt-md>
                <a routerLinkActive="active" [routerLink]="['/menu1']" mat-button>
                    <span [translate]="'Menu1'" class="font-lg"></span>
                </a>
                <a routerLinkActive="active" [routerLink]="['/menu2']" mat-button>
                    <span [translate]="'Menu2'" class="font-lg"></span>
                </a>
                <a routerLinkActive="active" [routerLink]="['/menu3']" mat-button>
                    <span [translate]="'Menu3'" class="font-lg"></span>
                </a>
                <a routerLink="active" [routerLink]="['/menu4']" mat-button>
                    <span [translate]="'menu4'" class="font-lg"></span>
                </a>
            </div>
        </mat-toolbar-row>
    </mat-toolbar>

    <mat-sidenav-container class="flex-grow-1">
        <mat-sidenav #sidenav mode="side" role="navigation" [fixedTopGap]="52">
            <mat-nav-list>
                <a mat-list-item routerLinkActive="active" [routerLink]="['/menu1']">
                    <span [translate]="'Menu1'" class="font-lg"></span>
                </a>
                <a mat-list-item routerLinkActive="active" [routerLink]="['/menu2']">
                    <span [translate]="'Menu2'" class="font-lg"></span>
                </a>
                <a mat-list-item routerLinkActive="active" [routerLink]="['/menu3']">
                    <span [translate]="'Menu3'" class="font-lg"></span>
                </a>
                <a mat-list-item routerLink="active" [routerLink]="['/menu4']">
                    <span [translate]="'Menu4'" class="font-lg"></span>
                </a>
            </mat-nav-list>
        </mat-sidenav>
        <mat-sidenav-content>
            <router-outlet></router-outlet>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

Answer 1

After taking a look at your stackblitz project:

• You should add <app-layout></app-layout> to your app.component.html as you are Bootstrapping that and will be the entry to your project

• You should add set the margin of app-layout to zero

• You should change the structure of the layout component:

  1. wrap your whole navigation with <mat-sidenav-container>
  2. move the <mat-toolbar> to the <mat-sidenav-content>

  3. add the following classes to layout.component.scss mat-sidenav-container, mat-sidenav-content, mat-sidenav { height: 100%; } mat-sidenav{ display: flex; flex-direction: column; flex: 1 0 auto; width: 200px; }

  4. wrap <router-outlet> with a <main> which specifies the main content of the website.

  5. add a margin-top of around 80px for the main element as you want to have a fixed toolbar

• Now let's fix your routing. If you don't want your '' to navigate to home but to your home component, you should add :

  1. edit your routes in your app-routing.module.ts to match { path: '', redirectTo: 'home', pathMatch: 'full', }, { path: '', component: LayoutComponent, children: [ { path: 'home', loadChildren: './home/home.module#HomeModule' } ] } and

  2. add a home.routing.module.ts with the following

` import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';

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

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HomeRoutingModule { }

` 3. add the HomeRoutingModule to the imports of your HomeModule

Answer 2

Based on your stackblitz code I managed to get the sidenav work. Here is my fork of your stackblitz code: https://stackblitz.com/edit/angular-5kvkwh

Following steps are needed:

• In app.component.html <app-layout> need to be used.

• In app-routing.module.ts the home component should be displayed. This is needed to show something in your <router-outlet>.

• In layout-component.html several steps were needed. One of the main points is, that the entire layout should be in a <mat-sidenav-container> and the main content of your application should be in <mat-sidenav-content>.

• To have strech the sidenav for the entire page some css modifications were needed (styles.scss, app.component.css, layout.component.scss).

I recommend you to create separate components for the sidenav, for the header and for the content components. You can find an example to this in my repo on this url.