How To Get Width And Height Of Screen In Angular?

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

we will see a simple example of how to detect window height and width in angular 6+ applications. you can also see an example of getting window size on resize event in angular.

In our angular application, we will get the size of a window on resize events. Here, we will explain two examples to get window size. in our first example, we will simply get the window size, and in our second example, we will get the window size on resizing. In order to get the height and width of the window, the step by step process is described as follows:

Example 1:

In the first example, we will get the width and height of the window.

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 6+';  
    
  public screenWidth: any;  
  public screenHeight: any;  
    
  ngOnInit() {  
      this.screenWidth = window.innerWidth;  
      this.screenHeight = window.innerHeight;  
  }  
}

Now our example 1 is ready to run. When we run this example, the following output will be generated:

Screen width: 1374
  
Screen height: 589

Example 2:

In our second example, we will get window size on resizing.

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 6+';  
    
  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;  
  }  
     
}

Now our example 2 is ready to run. When we run this example, the following output will be generated:

Screen width: 878
  
Screen height: 685

I hope you guys understand the code. Let me know if you’re facing any difficulties.

Happy Coding {;} ????