How to get height and width of device display in angular2 using typescript?

Question

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.

Answer 1

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);     }  } 

Answer 2

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)      } }