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 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...




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: