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>