diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts index 544f0f143c27..b95b569c06cf 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts @@ -57,6 +57,16 @@ describe('CdkVirtualScrollViewport', () => { expect(viewport.getViewportSize()).toBe(testComponent.viewportSize); })); + it('should update viewport size', fakeAsync(() => { + testComponent.viewportSize = 300; + viewport.updateViewportSize(); + expect(viewport.getViewportSize()).toBe(300); + + testComponent.viewportSize = 500; + viewport.updateViewportSize(); + expect(viewport.getViewportSize()).toBe(500); + })); + it('should get the rendered range', fakeAsync(() => { finishInit(fixture); diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts index 33c95dbc7d97..45e611f8ebe3 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.ts @@ -107,14 +107,12 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { @Inject(VIRTUAL_SCROLL_STRATEGY) private _scrollStrategy: VirtualScrollStrategy) {} ngOnInit() { - const viewportEl = this.elementRef.nativeElement; 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)) @@ -146,6 +144,13 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { this._destroyed.complete(); } + /** Update the viewport dimensions and re-render. */ + updateViewportSize() { + // TODO: Cleanup later when add logic for handling content resize + this._measureViewportSize(); + this._scrollStrategy.onDataLengthChanged(); + } + /** Attaches a `CdkVirtualForOf` to this viewport. */ attach(forOf: CdkVirtualForOf) { if (this._forOf) { @@ -305,4 +310,11 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy { } return this._forOf.measureRangeSize(range, this.orientation); } + + /** Measure the viewport size. */ + private _measureViewportSize() { + const viewportEl = this.elementRef.nativeElement; + this._viewportSize = this.orientation === 'horizontal' ? + viewportEl.clientWidth : viewportEl.clientHeight; + } }