ItSolutionStuff.com

Hi Dev,

This tutorial will provide example of angular get height and width of screen. i explained simply about how to get screen width in angular. if you have question about how to get screen height in angular then i will give simple example with solution. In this article, we will implement a get screen height in angular.

we will see simple example of how to detect window height and width in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 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...