Merge pull request CirclonGroup#787 from alechemy/master

adamkleingit · web-flow · commit 277dcc4e6b47 · 2020-02-13T17:30:13.000+02:00
Handle scroll events outside of angular change detection
diff --git a/lib/components/tree-viewport.component.ts b/lib/components/tree-viewport.component.ts
@@ -1,5 +1,5 @@
 import {
-  Component, ElementRef, ViewEncapsulation, HostListener, AfterViewInit, OnInit, OnDestroy
+  Component, ElementRef, ViewEncapsulation, AfterViewInit, OnInit, OnDestroy, NgZone
 } from '@angular/core';
 import { TreeVirtualScroll } from '../models/tree-virtual-scroll.model';
 import { TREE_EVENTS } from '../constants/events';
@@ -22,10 +22,13 @@ export class TreeViewportComponent implements AfterViewInit, OnInit, OnDestroy {
   setViewport = throttle(() => {
     this.virtualScroll.setViewport(this.elementRef.nativeElement);
   }, 17);
+  private readonly scrollEventHandler: ($event: Event) => void;
 
   constructor(
     private elementRef: ElementRef,
+    private ngZone: NgZone,
     public virtualScroll: TreeVirtualScroll) {
+        this.scrollEventHandler = this.setViewport.bind(this);
   }
 
   ngOnInit() {
@@ -37,18 +40,19 @@ export class TreeViewportComponent implements AfterViewInit, OnInit, OnDestroy {
       this.setViewport();
       this.virtualScroll.fireEvent({ eventName: TREE_EVENTS.initialized });
     });
+    let el: HTMLElement = this.elementRef.nativeElement;
+    this.ngZone.runOutsideAngular(() => {
+        el.addEventListener('scroll', this.scrollEventHandler);
+    });
   }
 
   ngOnDestroy() {
     this.virtualScroll.clear();
+    let el: HTMLElement = this.elementRef.nativeElement;
+    el.removeEventListener('scroll', this.scrollEventHandler);
   }
 
   getTotalHeight() {
     return this.virtualScroll.isEnabled() && this.virtualScroll.totalHeight + 'px' || 'auto';
   }
-
-  @HostListener('scroll', ['$event'])
-  onScroll(event: Event) {
-    this.setViewport();
-  }
 }
