platosha / angular-polymer

Angular 2 support for Polymer elements
https://www.npmjs.com/package/angular-polymer
Apache License 2.0
220 stars 44 forks source link

Event Listeners should be registered outside Angular #2

Open Saulis opened 8 years ago

Saulis commented 8 years ago

In an Angular 2 app, zone.js basically polyfills/overrides native functions like addEventListener, setTimeout etc.

When event listeners are added using addEventListener function, they get registered in the zone.js and effectively are used to detect changes inside the app.

In practice, components like vaadin-grid and vaadin-combo-box listen to scroll event, therefore scrolling these components will trigger the execution of ngDoCheck function on every directive/component in the app on every event.

This will most likely cause performance issues like we already saw earlier when hovering over vaadin-charts.

To fix this, we should be able to somehow register our event listeners outside Angular using

this.zone.runOutsideAngular(() => { 
  // call addEventListeners here. 
});
jaichandra commented 7 years ago

I noticed the same issue and was thinking about how to use runOutsideAngular to wrap all Polymer events to improve performance. I am seeing quite a bit of performance degradation with nested elements - not just Vaadin elements, but basic paper-elements like paper-menu-button. Anybody looking at this. Any workarounds?