app.component.html
using the mat-sidenav-container component
<app-layout>
<mat-sidenav-container>
<mat-sidenav #sidenav role="navigation">
<!--this is a place for us to add side-nav code-->
</mat-sidenav>
<mat-sidenav-content>
<!--in here all the content must reside. We will add a navigation header as well-->
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
</app-layout>
We create a container for a side navigation bar and specify the part for our content. As you can see the <mat-sidenav> element defines a place for a side navigation and the <mat-sidenav-content>element defines a place for our content. We need to use the local reference #sidenav
Register the module in the material.module.ts file:
import { MatTabsModule, MatSidenavModule } from '@angular/material';
@NgModule({
imports: [
CommonModule,
MatTabsModule,
MatSidenavModule
],
exports: [
MatTabsModule,
MatSidenavModule
],
app.component.css file:
mat-sidenav-container, mat-sidenav-content, mat-sidenav {
height: 100%;
}
mat-sidenav {
width: 250px;
}
main {
padding: 10px;
}
styles.css
/ for sidenav to take a whole page /
html, body {
margin: 0;
height: 100%;
}
