angular: Observable from window resize event is ignored by change detection in Internet Explorer

I’m submitting a bug report
Current behavior

I have an observable to trace window resize events: Observable.fromEvent(window, 'resize'). Than later in the code I subscribe to it and update fields in my component class:

    resizeEvtObs.subscribe(val => {
      this.width = val.width;
      this.height = val.height;
    });

The fields are bound to the template with interpolation: Window dimensions: {{ width }} x {{ height }}.

When I run this in Firefox, Chrome or Edge, the binding works perfectly and my page is updated immediately. In Internet Explorer he binding is never updated though.

Steps to reproduce

http://plnkr.co/edit/J7L0G0Iw5CHBulma0sND Best to run the preview in a separate window mode, as the screen updates are immediate then (in the browsers that work).

Expected/desired behavior

I would like the app in IE to behave like in the other browsers. As all the other browsers behave as expected, I suspect the bug lies somewhere in Angular missing the IE window resize event and not triggering the change detection. I don’t know enough of the NG internals to know better.

Angular version: 2.0.0-rc.1. I was able to reproduce in beta17 too.
Browser: Internet Explorer 11 (11.306.10586.0).

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 21 (11 by maintainers)

Most upvoted comments

Just inject it to the zone and ensure the this.someObservable.next(someValue) is called like

class MyService {
  resize$ = new Subject();
  constuctor(zone:NgZone) {
    window.addEventListener('resize', event => {
      zone.run(() => {
        this.resize$.next({
          width: window.innerWidth,
          height: window.innerHeight
        });
      });
    });
  }
}

zoechi on Jun 10, 2016

so that I know whether I should wait for the fix or handle myself?

Until this is implemented https://github.com/angular/angular/issues/4603 you’ll have to do both

ericmartinezr on Jun 10, 2016