fix(virtual-scroll): emit on viewChange inside the NgZone (#12873)

Author: mmalerba

src/cdk/scrolling/virtual-for-of.ts

@@ -17,6 +17,7 @@ import {
   IterableDiffer,
   IterableDiffers,
   NgIterable,
+  NgZone,
   OnDestroy,
   SkipSelf,
   TemplateRef,
@@ -166,14 +167,15 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
       /** The set of available differs. */
       private _differs: IterableDiffers,
       /** The virtual scrolling viewport that these items are being rendered in. */
-      @SkipSelf() private _viewport: CdkVirtualScrollViewport) {
+      @SkipSelf() private _viewport: CdkVirtualScrollViewport,
+      ngZone: NgZone) {
     this.dataStream.subscribe(data => {
       this._data = data;
       this._onRenderedDataChange();
     });
     this._viewport.renderedRangeStream.pipe(takeUntil(this._destroyed)).subscribe(range => {
       this._renderedRange = range;
-      this.viewChange.next(this._renderedRange);
+      ngZone.run(() => this.viewChange.next(this._renderedRange));
       this._onRenderedDataChange();
     });
     this._viewport.attach(this);

src/cdk/scrolling/virtual-scroll-viewport.spec.ts

@@ -9,6 +9,7 @@ import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {
   Component,
   Input,
+  NgZone,
   TrackByFunction,
   ViewChild,
   ViewContainerRef,
@@ -603,6 +604,13 @@ describe('CdkVirtualScrollViewport', () => {
           fixture.destroy();
           expect(dispatcher.deregister).toHaveBeenCalledWith(testComponent.viewport);
         })));
+
+    it('should emit on viewChange inside the Angular zone', fakeAsync(() => {
+      const zoneTest = jasmine.createSpy('zone test');
+      testComponent.virtualForOf.viewChange.subscribe(() => zoneTest(NgZone.isInAngularZone()));
+      finishInit(fixture);
+      expect(zoneTest).toHaveBeenCalledWith(true);
+    }));
   });
 
   describe('with RTL direction', () => {
@@ -766,6 +774,7 @@ function triggerScroll(viewport: CdkVirtualScrollViewport, offset?: number) {
 })
 class FixedSizeVirtualScroll {
   @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
+  @ViewChild(CdkVirtualForOf) virtualForOf: CdkVirtualForOf<any>;
   @ViewChild(CdkVirtualForOf, {read: ViewContainerRef}) virtualForViewContainer: ViewContainerRef;
 
   @Input() orientation = 'vertical';