How to setup element layouts using Angular 8 and Material Design with flex-layout to setup 100% height of content element, add top navigation and footer?
In this example we will use mat-sidenav-container to structure the elements.
So, the main element wrapper needs to be mat-sidenav-container with attribute fullscreen
In this example we will use mat-sidenav-container to structure the elements.
So, the main element wrapper needs to be mat-sidenav-container with attribute fullscreen
<mat-sidenav-container fullscreen> </mat-sidenav-container>
fullscreen will occupy full available space on the screen.
Next, inside of mat-sidenav-container we will add mat-sidenav-content and set fxLayout to column
Next, inside of mat-sidenav-container we will add mat-sidenav-content and set fxLayout to column
<mat-sidenav-container fullscreen> <mat-sidenav-content fxLayout="column"> </mat-sidenav-content> </mat-sidenav-container>
This setup will already occupy full available space
Now, let's add footer element which should be set to bottom of page and it will be pushed down as the content of the page exceed window height. This we can achieve with attribute fxFlexOffset="auto"
Now, let's add footer element which should be set to bottom of page and it will be pushed down as the content of the page exceed window height. This we can achieve with attribute fxFlexOffset="auto"
<mat-sidenav-container fullscreen>
<mat-sidenav-content fxLayout="column">
<footer fxFlexOffset="auto">
<p>Test footer</p>
</footer>
</mat-sidenav-content>
</mat-sidenav-container>
Now we can add top toolbar and router outlet to this setup
<mat-sidenav-container fullscreen>
<mat-sidenav-content fxLayout="column">
<mat-toolbar>
<!-- top navigation buttons -->
</mat-toolbar>
<router-outlet>
<!-- content change by changing the route -->
</router-outlet>
<footer fxFlexOffset="auto">
<p>Test footer</p>
</footer>
</mat-sidenav-content>
</mat-sidenav-container>