virtual-scroll: add update method (#11476)

Supersedes #11210

Author: amcdnl

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

@@ -57,6 +57,18 @@ describe('CdkVirtualScrollViewport', () => {
       expect(viewport.getViewportSize()).toBe(testComponent.viewportSize);
     }));
 
+    it('should update viewport size', fakeAsync(() => {
+      testComponent.viewportSize = 300;
+      fixture.detectChanges();
+      viewport.checkViewportSize();
+      expect(viewport.getViewportSize()).toBe(300);
+
+      testComponent.viewportSize = 500;
+      fixture.detectChanges();
+      viewport.checkViewportSize();
+      expect(viewport.getViewportSize()).toBe(500);
+    }));
+
     it('should get the rendered range', fakeAsync(() => {
       finishInit(fixture);
 

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

@@ -107,16 +107,14 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy {
               @Inject(VIRTUAL_SCROLL_STRATEGY) private _scrollStrategy: VirtualScrollStrategy) {}
 
   ngOnInit() {
-    const viewportEl = this.elementRef.nativeElement;
     // It's still too early to measure the viewport at this point. Deferring with a promise allows
     // the Viewport to be rendered with the correct size before we measure.
     Promise.resolve().then(() => {
-      this._viewportSize = this.orientation === 'horizontal' ?
-          viewportEl.clientWidth : viewportEl.clientHeight;
+      this._measureViewportSize();
       this._scrollStrategy.attach(this);
 
       this._ngZone.runOutsideAngular(() => {
-        fromEvent(viewportEl, 'scroll')
+        fromEvent(this.elementRef.nativeElement, 'scroll')
             // Sample the scroll stream at every animation frame. This way if there are multiple
             // scroll events in the same frame we only need to recheck our layout once.
             .pipe(sampleTime(0, animationFrameScheduler), takeUntil(this._destroyed))
@@ -307,4 +305,18 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy {
     }
     return this._forOf.measureRangeSize(range, this.orientation);
   }
+
+  /** Update the viewport dimensions and re-render. */
+  checkViewportSize() {
+    // TODO: Cleanup later when add logic for handling content resize
+    this._measureViewportSize();
+    this._scrollStrategy.onDataLengthChanged();
+  }
+
+  /** Measure the viewport size. */
+  private _measureViewportSize() {
+    const viewportEl = this.elementRef.nativeElement;
+    this._viewportSize = this.orientation === 'horizontal' ?
+        viewportEl.clientWidth : viewportEl.clientHeight;
+  }
 }