Position footer in real bottom of page if page long enough, or bottom of screen if page is short

main-footer.component.ts

// https://twitter.com/abennouna/status/1083639191295148032
import { AfterViewChecked, Component, ElementRef, Renderer2 } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-main-footer',
  templateUrl: './main-footer.component.html',
  styleUrls: ['./main-footer.component.scss'],
})
export class MainFooterComponent implements AfterViewChecked {
  initialized = false;

  constructor(
    private elementRef: ElementRef,
    private platform: Platform,
    private renderer: Renderer2,
  ) {
    this.platform.ready().then(() => {
      this.platform.resize.subscribe(() => {
        this.positionAtBottom();
      });
    });
  }

  ngAfterViewChecked() {
    if (!this.initialized) {
      const componentWrapper = this.elementRef.nativeElement;

      // Event is called multiple times, wait till it is available
      if (componentWrapper.offsetTop > 0) {
        this.initialized = true;

        this.positionAtBottom();
      }
    }
  }

  private positionAtBottom() {
    const componentWrapper = this.elementRef.nativeElement;

    // reset position in order to get correct dimensions
    this.renderer.removeStyle(componentWrapper, 'position');

    const boundingRectangle = componentWrapper.getBoundingClientRect();

    if (
      componentWrapper.offsetTop + boundingRectangle.height <
      this.platform.height()
    ) {
      this.renderer.setStyle(
        componentWrapper,
        'top',
        this.platform.height() - boundingRectangle.height + 'px'
      );

      this.renderer.setStyle(componentWrapper, 'position', 'absolute');

      // or just set in in `main-footer.component.scss`
      this.renderer.setStyle(componentWrapper, 'width', '100%');
    }
  }
}