virtual-scroll: address amcdnl's feedback (#10988)

* rewrite offsets to the end of the rendered content as offsets to the
start

* add some more autosize demos for testing

* make sure not to remove too many items

* virtual-scroll: address amcdnl's feedback

Author: mmalerba

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {ListRange} from '@angular/cdk/collections';
 import {Directive, forwardRef, Input, OnChanges} from '@angular/core';
 import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';
@@ -386,14 +387,20 @@ export class CdkAutoSizeVirtualScroll implements OnChanges {
    * The minimum amount of buffer rendered beyond the viewport (in pixels).
    * If the amount of buffer dips below this number, more items will be rendered.
    */
-  @Input() minBufferPx: number = 100;
+  @Input()
+  get minBufferPx(): number { return this._minBufferPx; }
+  set minBufferPx(value: number) { this._minBufferPx = coerceNumberProperty(value); }
+  _minBufferPx = 100;
 
   /**
    * The number of pixels worth of buffer to shoot for when rendering new items.
    * If the actual amount turns out to be less it will not necessarily trigger an additional
    * rendering cycle (as long as the amount of buffer is still greater than `minBufferPx`).
    */
-  @Input() addBufferPx: number = 200;
+  @Input()
+  get addBufferPx(): number { return this._addBufferPx; }
+  set addBufferPx(value: number) { this._addBufferPx = coerceNumberProperty(value); }
+  _addBufferPx = 200;
 
   /** The scroll strategy used by this directive. */
   _scrollStrategy = new AutoSizeVirtualScrollStrategy(this.minBufferPx, this.addBufferPx);

src/cdk-experimental/scrolling/fixed-size-virtual-scroll.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {ListRange} from '@angular/cdk/collections';
 import {Directive, forwardRef, Input, OnChanges} from '@angular/core';
 import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';
@@ -139,10 +140,16 @@ export function _fixedSizeVirtualScrollStrategyFactory(fixedSizeDir: CdkFixedSiz
 })
 export class CdkFixedSizeVirtualScroll implements OnChanges {
   /** The size of the items in the list (in pixels). */
-  @Input() itemSize = 20;
+  @Input()
+  get itemSize(): number { return this._itemSize; }
+  set itemSize(value: number) { this._itemSize = coerceNumberProperty(value); }
+  _itemSize = 20;
 
   /** The number of extra elements to render on either side of the scrolling viewport. */
-  @Input() bufferSize = 5;
+  @Input()
+  get bufferSize(): number { return this._bufferSize; }
+  set bufferSize(value: number) { this._bufferSize = coerceNumberProperty(value); }
+  _bufferSize = 5;
 
   /** The scroll strategy used by this directive. */
   _scrollStrategy = new FixedSizeVirtualScrollStrategy(this.itemSize, this.bufferSize);

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

@@ -71,7 +71,7 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
     const ds = value instanceof DataSource ? value :
         // Slice the value if its an NgIterable to ensure we're working with an array.
         new ArrayDataSource<T>(
-            value instanceof Observable ? value : Array.prototype.slice.call(value));
+            value instanceof Observable ? value : Array.prototype.slice.call(value || []));
     this._dataSourceChanges.next(ds);
   }
   _cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T>;

src/demo-app/virtual-scroll/virtual-scroll-demo.html

@@ -48,3 +48,12 @@ <h2>Fixed size</h2>
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
+
+<h2>Observable data</h2>
+
+<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="50">
+  <div *cdkVirtualFor="let size of observableData; let i = index" class="demo-item"
+       [style.height.px]="size">
+    Item #{{i}} - ({{size}}px)
+  </div>
+</cdk-virtual-scroll-viewport>

src/demo-app/virtual-scroll/virtual-scroll-demo.ts

@@ -7,6 +7,7 @@
  */
 
 import {Component, ViewEncapsulation} from '@angular/core';
+import {BehaviorSubject} from 'rxjs/index';
 
 @Component({
   moduleId: module.id,
@@ -21,4 +22,17 @@ export class VirtualScrollDemo {
   decreasingSizeData = Array(10000).fill(0)
       .map((_, i) => (1 + Math.floor((10000 - i) / 1000)) * 20);
   randomData = Array(10000).fill(0).map(() => Math.round(Math.random() * 100));
+  observableData = new BehaviorSubject<number[]>([]);
+
+  constructor() {
+    this.emitData();
+  }
+
+  emitData() {
+    let data = this.observableData.value.concat([50]);
+    this.observableData.next(data);
+    if (data.length < 1000) {
+      setTimeout(() => this.emitData(), 1000);
+    }
+  }
 }