don't recalulate height/width during every change detection

Author: mmalerba

src/cdk/scrolling/virtual-scroll-viewport.html

@@ -10,5 +10,4 @@
   so that the scrollbar captures the size of the entire data set.
 -->
 <div class="cdk-virtual-scroll-spacer"
-     [style.width]="orientation == 'horizontal' ? _totalContentSize + 'px' : ''"
-     [style.height]="orientation == 'vertical' ? _totalContentSize + 'px' : ''"></div>
+     [style.width]="_totalContentWidth" [style.height]="_totalContentHeight"></div>

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

@@ -71,7 +71,17 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
   private _renderedRangeSubject = new Subject<ListRange>();
 
   /** The direction the viewport scrolls. */
-  @Input() orientation: 'horizontal' | 'vertical' = 'vertical';
+  @Input()
+  get orientation() {
+    return this._orientation;
+  }
+  set orientation(orientation: 'horizontal' | 'vertical') {
+    if (this._orientation !== orientation) {
+      this._orientation = orientation;
+      this._calculateSpacerSize();
+    }
+  }
+  private _orientation: 'horizontal' | 'vertical' = 'vertical';
 
   // Note: we don't use the typical EventEmitter here because we need to subscribe to the scroll
   // strategy lazily (i.e. only if the user is actually listening to the events). We do this because
@@ -92,7 +102,13 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
   /**
    * The total size of all content (in pixels), including content that is not currently rendered.
    */
-  _totalContentSize = 0;
+  private _totalContentSize = 0;
+
+  /** A string representing the `style.width` property value to be used for the spacer element. */
+  _totalContentWidth = '';
+
+  /** A string representing the `style.height` property value to be used for the spacer element. */
+  _totalContentHeight = '';
 
   /**
    * The CSS transform applied to the rendered subset of items so that they appear within the bounds
@@ -232,6 +248,7 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
   setTotalContentSize(size: number) {
     if (this._totalContentSize !== size) {
       this._totalContentSize = size;
+      this._calculateSpacerSize();
       this._markChangeDetectionNeeded();
     }
   }
@@ -390,4 +407,12 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
       fn();
     }
   }
+
+  /** Calculates the `style.width` and `style.height` for the spacer element. */
+  private _calculateSpacerSize() {
+    this._totalContentHeight =
+        this.orientation === 'horizontal' ? '' : `${this._totalContentSize}px`;
+    this._totalContentWidth =
+        this.orientation === 'horizontal' ? `${this._totalContentSize}px` : '';
+  }
 }

tools/public_api_guard/cdk/scrolling.d.ts

@@ -90,7 +90,8 @@ export declare type CdkVirtualForOfContext<T> = {
 
 export declare class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, OnDestroy {
     _contentWrapper: ElementRef<HTMLElement>;
-    _totalContentSize: number;
+    _totalContentHeight: string;
+    _totalContentWidth: string;
     elementRef: ElementRef<HTMLElement>;
     orientation: 'horizontal' | 'vertical';
     renderedRangeStream: Observable<ListRange>;