How to Get Width and Height of Screen in Angular?

By Hardik Savani May 1, 2020 Category : Angular

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 and angular 12 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...