How to get height and width of device display in angular2 using typescript?
AngularTypescriptAngular Problem Overview
I found this solution. Is it valid?
import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
@Component({...})
export MyApp {
constructor(platform: Platform) {
platform.ready().then((readySource) => {
console.log('Width: ' + platform.width());
console.log('Height: ' + platform.height());
});
}
}
This solution is for ionic 2. can i also used for angular 2?
Please suggest me the right way to do it.
Angular Solutions
Solution 1 - Angular
For those who want to get height and width of device even when the display is resized (dynamically & in real-time):
- Step 1:
In that Component do: import { HostListener } from "@angular/core";
- Step 2:
In the component's class body write:
@HostListener('window:resize', ['$event'])
onResize(event?) {
this.screenHeight = window.innerHeight;
this.screenWidth = window.innerWidth;
}
- Step 3:
In the component's constructor
call the onResize
method to initialize the variables. Also, don't forget to declare them first.
constructor() {
this.onResize();
}
Complete code:
import { Component, OnInit } from "@angular/core";
import { HostListener } from "@angular/core";
@Component({
selector: "app-login",
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class FooComponent implements OnInit {
screenHeight: number;
screenWidth: number;
constructor() {
this.getScreenSize();
}
@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
this.screenHeight = window.innerHeight;
this.screenWidth = window.innerWidth;
console.log(this.screenHeight, this.screenWidth);
}
}
Solution 2 - Angular
I found the solution. The answer is very simple. write the below code in your constructor.
import { Component, OnInit, OnDestroy, Input } from "@angular/core";
// Import this, and write at the top of your .ts file
import { HostListener } from "@angular/core";
@Component({
selector: "app-login",
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {
// Declare height and width variables
scrHeight:any;
scrWidth:any;
@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
this.scrHeight = window.innerHeight;
this.scrWidth = window.innerWidth;
console.log(this.scrHeight, this.scrWidth);
}
// Constructor
constructor() {
this.getScreenSize();
}
}
====== Working Code (Another) ======
export class Dashboard {
mobHeight: any;
mobWidth: any;
constructor(private router:Router, private http: Http){
this.mobHeight = (window.screen.height) + "px";
this.mobWidth = (window.screen.width) + "px";
console.log(this.mobHeight);
console.log(this.mobWidth)
}
}
Solution 3 - Angular
export class Dashboard {
innerHeight: any;
innerWidth: any;
constructor() {
this.innerHeight = (window.screen.height) + "px";
this.innerWidth = (window.screen.width) + "px";
}
}
Solution 4 - Angular
You may use the typescript getter method for this scenario. Like this
public get height() {
return window.innerHeight;
}
public get width() {
return window.innerWidth;
}
And use that in template like this:
<section [ngClass]="{ 'desktop-view': width >= 768, 'mobile-view': width < 768
}"></section>
Print the value
console.log(this.height, this.width);
You won't need any event handler to check for resizing of window, this method will check for size every time automatically.
Solution 5 - Angular
Keep in mind if you are wanting to test this component you will want to inject the window. Use the @Inject() function to inject the window object by naming it using a string token like detailed in this duplicate
Solution 6 - Angular
I've read that it's recommended that you Inject DOCUMENT
in the constructor so it works on both rendering platforms: browser and server side. The global DOM reference to window
only works for browser rendering platforms. To get access to the widow object you can use DOCUMENT
:
@Inject(DOCUMENT) private _document: Document
console.log('window height ', this._document.defaultview.innerHeight);
console.log('window height ', this._document.defaultview.innerWidth);