How set up Angular Material Footer via Flex-Layout
Here is a solution in few lines if you prefer to fill your content instead of your footer (Akhi's solution):
app.component.html:
<div fxLayout="column" fxFlexFill> <app-header></app-header> // your header <div fxFlex> <router-outlet></router-outlet> // your content </div> <app-footer></app-footer> // your footer</div>styles.css:
html, body { height: 100%; box-sizing: border-box; margin: 0;}
Make the container flex and direction column by adding fxLayout="column"and make the footer sticky bottom by fxFlexOffset="auto"
<mat-sidenav-content fxLayout="column"> <app-header (menuButtonClick)="sidenav.toggle()"></app-header> <ng-content select="[outlet]"></ng-content> <app-footer fxFlexOffset="auto"></app-footer> </mat-sidenav-content>