Angular2 Get Window Width Onresize

Angular window resize event

<div (window:resize)="onResize($event)"

onResize(event) {
  event.target.innerWidth;
}

or using the HostListener decorator:

@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth;
}

Supported global targets are window, document, and body.

Until https://github.com/angular/angular/issues/13248 is implemented in Angular it is better for performance to subscribe to DOM events imperatively and use RXJS to reduce the amount of events as shown in some of the other answers.

How I can detect window resize instantly in angular 2?

You could just put handler on resize event over window object, but this will allow you to put only single resize event, latest registered event on onresize will work.

constructor(private ngZone:NgZone) {
    window.onresize = (e) =>
    {
        //ngZone.run will help to run change detection
        this.ngZone.run(() => {
            console.log("Width: " + window.innerWidth);
            console.log("Height: " + window.innerHeight);
        });
    };
}

To make it more angular way use @HostListener('window:resize') inside your component, which will allow to call your resize function(on which HostListner decorator has been mount) on resize of window.

@HostListener('window:resize', ['$event'])
onResize(event){
   console.log("Width: " + event.target.innerWidth);
}

Detecting real time window size changes in Angular 4

To get it on init

public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;
}

If you wanna keep it updated on resize:

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

Get initial resize of window for Angular2 app component

At this point in your application, document.load is already fired.
Easiest for you would probably be to do call the resizing function from your app-components constructor.
At this point your DOM is ready, and the application is firing up.
Also, you should assign the height value to a property in your app that the template can bind to rather than do DOM manipulation directly.

How to get width of a sub component onResize in angular?

Add #panel2 to your panel 2 and then in your TS file add @ViewChild('panel2') panel2; as a property of the class.

When the ngOnInit hook is triggered you can then access this.panel2.nativeElement, which you can also use inside of your HostListener, so you do not need to rely on the event's target anymore!

Angular 9 - How to get width of child elements during window size change?

in your template HTML add #element to the div and then in your ts get the width of element like this:

@ViewChild('element', { static: true }) element: ElementRef;
@HostListener('window:resize', ['$event'])
onResize(event) {
  console.log(this.element.nativeElement.clientWidth)
}

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

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