title: How set up Angular Material Footer via Flex-Layout
body: <p>How set up the footer in my app (I use Angular Material) so that it:</p>
  
  <ol>
  <li>sticks to the bottom if the content height is less than view-port</li>
  <li>moves down / gets pushed down if the content height is more than view-port</li>
  </ol>
  
  <p>One more important thing - I would like to achieve this via <strong><a href="https://github.com/angular/flex-layout" rel="noreferrer">angular/flex-layout</a></strong>, not via the standard HTML/CSS 'flex-box'.</p>
  
  <pre><code>&lt;mat-sidenav-container&gt;
    &lt;mat-sidenav #sidenav
      fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)"&gt;
  
      &lt;mat-nav-list&gt;
        &lt;mat-list-item *ngFor="let li of listItems" routerLink="{{li.link}}"&gt;
          &lt;mat-icon mat-list-icon&gt;{{li.icon}}&lt;/mat-icon&gt;
          &lt;p mat-line&gt;{{li.name}}&lt;/p&gt;
        &lt;/mat-list-item&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
  
      &lt;app-header (menuButtonClick)="sidenav.toggle()"&gt;&lt;/app-header&gt;
  
      &lt;ng-content select="[outlet]"&gt;&lt;/ng-content&gt;
  
      &lt;app-footer&gt;&lt;/app-footer&gt;
  
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;   
  </code></pre>
  
  <p>Thank you all.</p>