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

Error encountered during the compilation of Angular2 Typescript due to difficulty in mapping a JSON response with underscores in the names

Attempting to simulate the behavior of nfcManager by utilizing the nfcManager.start() function in react native testing library

Adding total stars options seems to be causing issues with the star rating feature in the ng framework

What steps can be taken to ensure a successful request to a Node.js server when previewing an Angular app on a separate device within the same network?

gulp-angular2 task is malfunctioning

Arrange a JSON response in descending order and filter out specific values

Handle and manage errors within the controller in Express.js to prevent the further execution of asynchronous functions

Unable to show custom marker icon on ngx-mapbox-gl Angular

Using TypeScript to import a Vue 2 component into a Vue 3 application

Using Cypress fixtures with TypeScript

Jest snapshot tests are not passing due to consistent output caused by ANSI escape codes

Utilizing the spread operator in Typescript to combine multiple Maps into a fresh Map leads to an instance of a clear Object

A step-by-step guide on generating a TypeScript class using JSON data

Oops! Looks like there was an issue with assigning to a reference or variable: Error: Uncaught (in promise)

The modal feature on ng-bootstrap.github.io is failing to function properly when used with the Bootstrap3 CSS

Effective strategies for managing form submissions with React and Typescript

Can you provide guidance on how to specifically specify the type for the generics in this TypeScript function?

Ways to verify if the current date exists within a TypeScript date array

Is it possible to modify the HTML/CSS of a child component using the parent component in Angular 2+?

What are the optimal strategies for managing various components within an Angular (2) Web application?