Detect window size using Angular

app.component.ts

import {Component, OnInit, HostListener, AfterViewChecked} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewChecked {
  title = 'web-ui';
  screenHeight: any;
  screenWidth: any;

  ngOnInit(): void {

  }

  constructor() {
    this.onResize();
  }

  @HostListener('window:resize', ['$event'])
  onResize(event?) {
    this.getScreenSize();
  }


  /**
   * get size of screen
   */
  getScreenSize() {
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
    console.log(this.screenHeight, this.screenWidth);
  }

  /**
   * get initial size of appContainer class
   */
  getAppDivSize() {
    this.appHeight = (document.getElementsByClassName('appContainer').item(0) as HTMLElement).offsetHeight;
    this.appWidth = (document.getElementsByClassName('appContainer').item(0) as HTMLElement).offsetWidth;
    console.log(this.appHeight, this.appWidth);
  }
}

References
https://stackoverflow.com/questions/45350716/detect-window-size-using-angular-4

Related