Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

ResizeObserver issue #1011

Closed
scaljeri opened this issue Feb 3, 2018 · 4 comments · Fixed by #1012
Closed

ResizeObserver issue #1011

scaljeri opened this issue Feb 3, 2018 · 4 comments · Fixed by #1012

Comments

@scaljeri
Copy link

scaljeri commented Feb 3, 2018

I'm using ResizeObserver for which I use a polyfill because its browser support is limited. Now, recently, chrome 64 natively supports this API with the result that changes trigged by ResizeObserver don't trigger changedetection in my angular app.

stackblitz demo

const observer = new window.ResizeObserver(entries => {
          this.observedWidth = entries[0].contentRect.width;  // Outside a zone??!!
});
observer.observe(this.resizable.nativeElement);

The expected behaviour can be seen in firefox/safari and chrome 63 of course.

Now I don't know that much about Zone.js. but I would expect Zone.js to take care of this?

For more details:
stackoverflow question

@JiaLiPassion
Copy link
Collaborator

@scaljeri, sure, I will make a patch for this.

@scaljeri
Copy link
Author

scaljeri commented Feb 3, 2018

For the mean time, is there an easy way to run the code inside the callback within a zone?

@JiaLiPassion
Copy link
Collaborator

for now, you can do this to run the callback in ngZone

constructor(private ngZone: NgZone) {}

const observer = new window.ResizeObserver(this.ngZone.run((entries) => {
          this.observedWidth = entries[0].contentRect.width;  // Outside a zone??!!
}));
observer.observe(this.resizable.nativeElement);

@scaljeri
Copy link
Author

scaljeri commented Feb 3, 2018

thanks a lot!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants