How set up Angular Material Footer via Flex-Layout

Question

How set up the footer in my app (I use Angular Material) so that it:

sticks to the bottom if the content height is less than view-port
moves down / gets pushed down if the content height is more than view-port

One more important thing - I would like to achieve this via angular/flex-layout, not via the standard 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>

Thank you all.

Possible duplicate of [Sticky footer in Angular 2 Material](https://stackoverflow.com/questions/46722868/sticky-footer-in-angular-2-material) — Narm, Dec 21 '18 at 15:25
Hi @Narm - I asked whether anybody knows how to solve this problem using angular/flex-layout. Not the traditional 'flex-box'. — pax, Dec 21 '18 at 15:47
Fair Enough, point taken. I see that is a bit different from the other question. — Narm, Dec 21 '18 at 15:54

score 18 · Accepted Answer · answered Jun 02 '19 at 09:37

18

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;
}

answered Jun 02 '19 at 09:37

Emeric

6,315
2
41
54

I don't think we need `fxFlexFill` here since we need to use it with the child elements of the container. – Sampath Sep 07 '20 at 14:18

score 10 · Answer 2 · answered Dec 22 '18 at 06:59

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>

How set up Angular Material Footer via Flex-Layout

2 Answers2