Angular Get Screen Width and Height Example

I will explain step by step tutorial angular get height and width of screen. We will use how to check window width in angular. if you have question about angular detect screen height then i will give simple example with solution. step by step explain get screen height in angular. Follow bellow tutorial step of angular window resize event listener.

we will see simple example of how to detect window height and width in angular 6, angular 7, angular 8 and angular 9 application. you can also see example of getting window size on resize event in angular.

I will give you two example that will help you getting window size in angular app.

Example 1:

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `
     <p>Screen width: {{ screenWidth }}</p>
     <p>Screen height: {{ screenHeight }}</p>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  
  public screenWidth: any;
  public screenHeight: any;
  
  ngOnInit() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
  }
}

Output:

Screen width: 1535
  
Screen height: 762

Example 2: Detect Window Size on Resize in Angular

import { Component, OnInit, HostListener } from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `
     <p>Screen width: {{ screenWidth }}</p>
     <p>Screen height: {{ screenHeight }}</p>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  
  public screenWidth: any;
  public screenHeight: any;
  
  ngOnInit() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
  }
  
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.screenWidth = window.innerWidth;
    this.screenHeight = window.innerHeight;
  }
   
}

Output:

Screen width: 960
  
Screen height: 752

I hope it can help you...