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




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: