virtual-scroll: allow user to pass Observable<T[]>

Author: mmalerba

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CollectionViewer, DataSource, Range, StaticArrayDataSource} from '@angular/cdk/collections';
+import {ArrayDataSource, CollectionViewer, DataSource, Range} from '@angular/cdk/collections';
 import {
   Directive,
   DoCheck,
@@ -35,7 +35,7 @@ import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 /** The context for an item rendered by `CdkVirtualForOf` */
 export type CdkVirtualForOfContext<T> = {
   $implicit: T;
-  cdkVirtualForOf: NgIterable<T> | DataSource<T>;
+  cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T>;
   index: number;
   count: number;
   first: boolean;
@@ -61,15 +61,18 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
 
   /** The DataSource to display. */
   @Input()
-  get cdkVirtualForOf(): NgIterable<T> | DataSource<T> { return this._cdkVirtualForOf; }
-  set cdkVirtualForOf(value: NgIterable<T> | DataSource<T>) {
+  get cdkVirtualForOf(): DataSource<T> | Observable<T[]> | NgIterable<T> {
+    return this._cdkVirtualForOf;
+  }
+  set cdkVirtualForOf(value: DataSource<T> | Observable<T[]> | NgIterable<T>) {
     this._cdkVirtualForOf = value;
     const ds = value instanceof DataSource ? value :
-        // Slice the value since NgIterable may be array-like rather than an array.
-        new StaticArrayDataSource<T>(Array.prototype.slice.call(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));
     this._dataSourceChanges.next(ds);
   }
-  _cdkVirtualForOf: NgIterable<T> | DataSource<T>;
+  _cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T>;
 
   /**
    * The `TrackByFunction` to use for tracking changes. The `TrackByFunction` takes the index and

src/cdk/collections/static-array-data-source.ts renamed to src/cdk/collections/array-data-source.ts

@@ -12,11 +12,11 @@ import {DataSource} from './data-source';
 
 
 /** DataSource wrapper for a native array. */
-export class StaticArrayDataSource<T> implements DataSource<T> {
-  constructor(private _data: T[]) {}
+export class ArrayDataSource<T> implements DataSource<T> {
+  constructor(private _data: T[] | Observable<T[]>) {}
 
   connect(): Observable<T[]> {
-    return observableOf(this._data);
+    return this._data instanceof Observable ? this._data : observableOf(this._data);
   }
 
   disconnect() {}

src/cdk/collections/public-api.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+export * from './array-data-source';
 export * from './collection-viewer';
 export * from './data-source';
 export * from './selection';
-export * from './static-array-data-source';
 export {
   UniqueSelectionDispatcher,
   UniqueSelectionDispatcherListener,

tools/package-tools/rollup-globals.ts

@@ -71,6 +71,8 @@ export const rollupGlobals = {
   'rxjs/observable/of': 'Rx.Observable',
   'rxjs/observable/throw': 'Rx.Observable',
 
+  'rxjs/scheduler/animationFrame': 'Rx.Scheduler',
+
   'rxjs/operators/auditTime': 'Rx.operators',
   'rxjs/operators/catchError': 'Rx.operators',
   'rxjs/operators/combineLatest': 'Rx.operators',
@@ -88,4 +90,5 @@ export const rollupGlobals = {
   'rxjs/operators/take': 'Rx.operators',
   'rxjs/operators/takeUntil': 'Rx.operators',
   'rxjs/operators/tap': 'Rx.operators',
+  'rxjs/operators/throttleTime': 'Rx.operators',
 };