What is the best way to retrieve the height and width of a device's display in Angular 2 using Typescript

Question

What is the best way to retrieve the height and width of a device's display in Angular 2 using Typescript

I came across this code snippet. Do you think it's 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 code is specifically for Ionic 2. Can it also be used for Angular 2?

Please advise me on the proper approach for this scenario.

angular typescript

Answer 1

Answer №1

For individuals looking to obtain the height and width of their device even when the display is adjusted (dynamically & in real-time):

Step 1:

In the specified Component, include:

import { HostListener } from "@angular/core";

Step 2:

Within the component's class body, add the following:

@HostListener('window:resize', ['$event'])
onResize(event?) {
   this.screenHeight = window.innerHeight;
   this.screenWidth = window.innerWidth;
}

Step 3:

Within the component's constructor, invoke the onResize method to initialize the variables. Ensure they are declared first as well.

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

For individuals looking to obtain the height and width of their device even when the display is adjusted (dynamically & in real-time):

Step 1:

In the specified Component, include:

import { HostListener } from "@angular/core";

Step 2:

Within the component's class body, add the following:

@HostListener('window:resize', ['$event'])
onResize(event?) {
   this.screenHeight = window.innerHeight;
   this.screenWidth = window.innerWidth;
}

Step 3:

Within the component's constructor, invoke the onResize method to initialize the variables. Ensure they are declared first as well.

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 3

Answer №2

I have discovered the solution to your problem and it is quite simple. All you need to do is add the following code snippet to your constructor.

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
// Make sure to import this line at the beginning 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 {
    // Define variables for height and width
    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 function
    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)
     }
}

Answer 4

I have discovered the solution to your problem and it is quite simple. All you need to do is add the following code snippet to your constructor.

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
// Make sure to import this line at the beginning 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 {
    // Define variables for height and width
    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 function
    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)
     }
}

Answer 5

Answer №3

class DataBoard {
    windowHeight: any;
    windowWidth: any;
    constructor() {
        this.windowHeight = (window.screen.height) + "px";
        this.windowWidth = (window.screen.width) + "px";
    }
}

Answer 6

class DataBoard {
    windowHeight: any;
    windowWidth: any;
    constructor() {
        this.windowHeight = (window.screen.height) + "px";
        this.windowWidth = (window.screen.width) + "px";
    }
}

Answer 7

Answer №4

To handle this scenario, you can utilize the typescript getter method. Here's an example:

public get height() {
  return window.innerHeight;
}

public get width() {
  return window.innerWidth;
}

Then, you can use these getters in your template like so:

<section [ngClass]="{ 'desktop-view': width >= 768, 'mobile-view': width < 768 
}"></section>

Display the values:

console.log(this.height, this.width);

You don't need to create an event handler to monitor window resizing as this method will automatically check the size every time.

Answer 8

To handle this scenario, you can utilize the typescript getter method. Here's an example:

public get height() {
  return window.innerHeight;
}

public get width() {
  return window.innerWidth;
}

Then, you can use these getters in your template like so:

<section [ngClass]="{ 'desktop-view': width >= 768, 'mobile-view': width < 768 
}"></section>

Display the values:

console.log(this.height, this.width);

You don't need to create an event handler to monitor window resizing as this method will automatically check the size every time.

Answer 9

Answer №5

Remember, in case you wish to test this specific component, make sure to inject the window. Utilize the @Inject() method to inject the window object by assigning it a string token as shown in this helpful article

Answer 10

Remember, in case you wish to test this specific component, make sure to inject the window. Utilize the @Inject() method to inject the window object by assigning it a string token as shown in this helpful article

Answer 11

Answer №6

It's been suggested that injecting DOCUMENT into the constructor is the best practice to ensure compatibility with both browser and server-side rendering platforms. The use of the global DOM reference to window may only work for browser-based rendering. To access the window object, you can utilize DOCUMENT:

@Inject(DOCUMENT) private _document: Document

console.log('window height ', this._document.defaultview.innerHeight);
console.log('window height ', this._document.defaultview.innerWidth);

Answer 12

It's been suggested that injecting DOCUMENT into the constructor is the best practice to ensure compatibility with both browser and server-side rendering platforms. The use of the global DOM reference to window may only work for browser-based rendering. To access the window object, you can utilize DOCUMENT:

@Inject(DOCUMENT) private _document: Document

console.log('window height ', this._document.defaultview.innerHeight);
console.log('window height ', this._document.defaultview.innerWidth);

What is the best way to retrieve the height and width of a device's display in Angular 2 using Typescript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

How to access elements by their class name in Angular

Show a modal component from another component in Angular 2

What is the best way to handle success data in React Query?

Encountering an issue with Angular2 where it is unable to load a JSON file, presenting the error message: "Cannot resolve all parameters

Steps for assigning the TAB key functionality within a text area

Struggling to tally the entries and authenticate logins within Ionic 3 and Angular

Iterate through each item in an object using Angular

Creating a dynamic table with columns of fixed width in Angular on the fly

Having trouble iterating over an array in Angular's TypeScript

Determine the data type of an individual attribute within a collection of classes

Issue: ng test encountered a StaticInjectorError related to FormBuilder

The module declaration can be found in two locations

Having Trouble with Ionic 2's Loading Controller

Angular button press

Which types of mouse events are compatible with Angular2?

Guide on accessing an element from a predicate object in Typescript while using Angular

Sending the :id parameter to the Service component

Using React.PureComponent, the list component efficiently renders each item with optimized performance

Encountering an ECONNREFUSED error upon upgrading from Next.js 12 to 13

Ways to acquire the reference of the parent component