Could someone help me with setting up the footer in my Angular Material app? I want it to:
- stick to the bottom when the content height is smaller than the view-port
- move down or get pushed down when the content height exceeds the view-port
One important requirement - I am looking to achieve this using angular/flex-layout, rather than traditional HTML/CSS 'flex-box'.
<mat-sidenav-container>
<mat-sidenav #sidenav
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-nav-list>
<mat-list-item *ngFor="let li of listItems" routerLink="{{li.link}}">
<mat-icon mat-list-icon>{{li.icon}}</mat-icon>
<p mat-line>{{li.name}}</p>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<app-header (menuButtonClick)="sidenav.toggle()"></app-header>
<ng-content select="[outlet]"></ng-content>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
Appreciate any insights and assistance. Thank you!