How to Get Width and Height of Screen in Angular?
In this post we will give you information about How to Get Width and Height of Screen in Angular?. Hear we will give you detail about How to Get Width and Height of Screen in Angular?And how to use it also give you demo for it if it is necessary.
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…
Hope this code and post will helped you for implement How to Get Width and Height of Screen in Angular?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs
