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

后端 未结 5 610
猫巷女王i
猫巷女王i 2020-12-13 01:50

I found this solution. Is it valid?

import {Component} from \'@angular/core\';
import {Platform} from \'ionic-angular\';

@Component({...})
export MyApp {
co         


        
5条回答
  •  天命终不由人
    2020-12-13 02:32

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

提交回复
热议问题