Angular2 get window width onResize

Question

Trying to figure out how to get window width on resizing events in Angular2. Here is my code:

export class SideNav {

    innerWidth: number;

    constructor(private window: Window){

        let getWindow = function(){
          return window.innerWidth;
        };

        window.onresize = function() {
          this.innerWidth = getWindow();
          console.log(getWindow());
        };
}

I am importing window provider globally in the bootstrap.ts file using provide to gain access across my app to window. The problem I am having is this does give me a window size, but on resizing the window - it just repeats the same size over and over even if the window changes size. See image for console.log example: Screenshot image

My overall goal is to be able to set the window number to a variable onresize so I can have access to it in the template. Any ideas on what I am doing wrong here?

Thanks!

Günter Zöchbauer · Answer 1 · 2017-08-28T13:30:45.530

54

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

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

to get notified on scroll events on a child element in a components template

or listen on the components host element itself

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

edited Aug 28 '17 at 13:30

answered Feb 20 '16 at 18:56

Günter Zöchbauer

623,577
216
2,003
1,567

why did you comment out the @Hostlistener ? For me it works only without the comment-slashes, but then it works perfectly :-) – Tobias Gassmann Aug 28 '17 at 13:26
1

It is meant as an alternative way. You can either add it to an element in the template as shown in the first code snipped or use a `@HostListener()` to listen on the components host element itself. I updated my answer to make it more clear. – Günter Zöchbauer Aug 28 '17 at 13:29

score 21 · Answer 2 · answered Feb 21 '16 at 06:26

21

Use NgZone to trigger change detection:

constructor(ngZone:NgZone) {
    window.onresize = (e) =>
    {
        ngZone.run(() => {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
        });
    };
}

answered Feb 21 '16 at 06:26

Michael Kang

52,003
16
103
135

interesting idea with the ngZone - I'll have to try it! Currently using an observable implementation to auto-detect changes. – Spencer Bigum Feb 21 '16 at 17:38

score 7 · Answer 3 · edited May 23 '17 at 12:18

In this case you need to run change detection manually. As you are modifying component variable from outer context of Angular, basically resize event doesn't get monkey patched by Angular2 change detection system.

Code

import {ChangeDetectorRef} from 'angular2/core'

export class SideNav {
    innerWidth: number;

    constructor(private window: Window, private cdr: ChangeDetectorRef){

       let getWindow = () => {
          return window.innerWidth;
       };

      window.onresize = () => {
          this.innerWidth = getWindow();
          this.cdr.detectChanges(); //running change detection manually
      };
    }
}

Rather I'd like to suggest you to go for this answer, which looks more cleaner

this was interesting to learn about the changedetection - but I was really glad you pointed me to the Observable solution - I was able to add a new service for global window width and height in a very reusable clean way with it - so thank you so much! — Spencer Bigum, Feb 21 '16 at 05:40

Angular2 get window width onResize

3 Answers3

Linked