address some comments

Author: mmalerba

src/cdk/collections/data-source.ts

@@ -7,7 +7,6 @@
  */
 
 import {Observable} from 'rxjs/Observable';
-import {of} from 'rxjs/observable/of';
 import {CollectionViewer} from './collection-viewer';
 
 
@@ -31,15 +30,3 @@ export abstract class DataSource<T> {
    */
   abstract disconnect(collectionViewer: CollectionViewer): void;
 }
-
-
-/** DataSource wrapper for a native array. */
-export class ArrayDataSource<T> implements DataSource<T> {
-  constructor(private _data: T[]) {}
-
-  connect(): Observable<T[]> {
-    return of(this._data);
-  }
-
-  disconnect() {}
-}

src/cdk/collections/public-api.ts

@@ -9,6 +9,7 @@
 export * from './collection-viewer';
 export * from './data-source';
 export * from './selection';
+export * from './static-array-data-source';
 export {
   UniqueSelectionDispatcher,
   UniqueSelectionDispatcherListener,

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Observable} from 'rxjs/Observable';
+import {of as observableOf} from 'rxjs/observable/of';
+import {DataSource} from './data-source';
+
+
+/** DataSource wrapper for a native array. */
+export class StaticArrayDataSource<T> implements DataSource<T> {
+  constructor(private _data: T[]) {}
+
+  connect(): Observable<T[]> {
+    return observableOf(this._data);
+  }
+
+  disconnect() {}
+}

src/cdk/scrolling/public-api.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export * from './for-of';
+export * from './virtual-for-of';
 export * from './scroll-dispatcher';
 export * from './scrollable';
 export * from './scrolling-module';

src/cdk/scrolling/scrolling-module.ts

@@ -8,7 +8,7 @@
 
 import {PlatformModule} from '@angular/cdk/platform';
 import {NgModule} from '@angular/core';
-import {CdkForOf} from './for-of';
+import {CdkVirtualForOf} from './virtual-for-of';
 import {SCROLL_DISPATCHER_PROVIDER} from './scroll-dispatcher';
 import {CdkScrollable} from './scrollable';
 import {CdkVirtualScrollFixedSize} from './virtual-scroll-fixed-size';
@@ -17,13 +17,13 @@ import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 @NgModule({
   imports: [PlatformModule],
   exports: [
-    CdkForOf,
+    CdkVirtualForOf,
     CdkScrollable,
     CdkVirtualScrollFixedSize,
     CdkVirtualScrollViewport,
   ],
   declarations: [
-    CdkForOf,
+    CdkVirtualForOf,
     CdkScrollable,
     CdkVirtualScrollFixedSize,
     CdkVirtualScrollViewport,

src/cdk/scrolling/for-of.ts renamed to src/cdk/scrolling/virtual-for-of.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ArrayDataSource, CollectionViewer, DataSource, Range} from '@angular/cdk/collections';
+import {CollectionViewer, DataSource, Range, StaticArrayDataSource} from '@angular/cdk/collections';
 import {
   Directive,
   DoCheck,
@@ -32,24 +32,22 @@ import {Subject} from 'rxjs/Subject';
 import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 
-/** The context for an item rendered by `CdkForOf` */
-export class CdkForOfContext<T> {
-  constructor(public $implicit: T, public cdkForOf: NgIterable<T> | DataSource<T>,
-              public index: number, public count: number) {}
-
-  get first(): boolean { return this.index === 0; }
-
-  get last(): boolean { return this.index === this.count - 1; }
-
-  get even(): boolean { return this.index % 2 === 0; }
-
-  get odd(): boolean { return !this.even; }
-}
+/** The context for an item rendered by `CdkVirtualForOf` */
+export type CdkVirtualForOfContext<T> = {
+  $implicit: T;
+  cdkVirtualForOf: NgIterable<T> | DataSource<T>;
+  index: number;
+  count: number;
+  first: boolean;
+  last: boolean;
+  even: boolean;
+  odd: boolean;
+};
 
 
 type RecordViewTuple<T> = {
   record: IterableChangeRecord<T> | null,
-  view?: EmbeddedViewRef<CdkForOfContext<T>>
+  view?: EmbeddedViewRef<CdkVirtualForOfContext<T>>
 };
 
 
@@ -58,53 +56,63 @@ type RecordViewTuple<T> = {
  * container.
  */
 @Directive({
-  selector: '[cdkFor][cdkForOf]',
+  selector: '[cdkVirtualFor][cdkVirtualForOf]',
 })
-export class CdkForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
+export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
   /** Emits when the rendered view of the data changes. */
   viewChange = new Subject<Range>();
 
-  /** Emits when the data source changes. */
-  private _dataSourceSubject = new Subject<DataSource<T>>();
+  /** Subject that emits when a new DataSource instance is given. */
+  private _dataSourceChanges = new Subject<DataSource<T>>();
 
   /** The DataSource to display. */
   @Input()
-  get cdkForOf(): NgIterable<T> | DataSource<T> { return this._cdkForOf; }
-  set cdkForOf(value: NgIterable<T> | DataSource<T>) {
-    this._cdkForOf = value;
-    let ds = value instanceof DataSource ? value :
-        new ArrayDataSource<T>(Array.prototype.slice.call(value));
-    this._dataSourceSubject.next(ds);
+  get cdkVirtualForOf(): NgIterable<T> | DataSource<T> { return this._cdkVirtualForOf; }
+  set cdkVirtualForOf(value: NgIterable<T> | DataSource<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));
+    this._dataSourceChanges.next(ds);
   }
-  _cdkForOf: NgIterable<T> | DataSource<T>;
+  _cdkVirtualForOf: NgIterable<T> | DataSource<T>;
 
-  /** The trackBy function to use for tracking elements. */
+  /**
+   * The `TrackByFunction` to use for tracking changes. The `TrackByFunction` takes the index and
+   * the item and produces a value to be used as the item's identity when tracking changes.
+   */
   @Input()
-  get cdkForTrackBy(): TrackByFunction<T> {
-    return this._cdkForOfTrackBy;
+  get cdkVirtualForTrackBy(): TrackByFunction<T> {
+    return this._cdkVirtualForTrackBy;
   }
-  set cdkForTrackBy(fn: TrackByFunction<T>) {
+  set cdkVirtualForTrackBy(fn: TrackByFunction<T>) {
     this._needsUpdate = true;
-    this._cdkForOfTrackBy =
+    this._cdkVirtualForTrackBy =
         (index, item) => fn(index + (this._renderedRange ? this._renderedRange.start : 0), item);
   }
-  private _cdkForOfTrackBy: TrackByFunction<T>;
+  private _cdkVirtualForTrackBy: TrackByFunction<T>;
 
   /** The template used to stamp out new elements. */
   @Input()
-  set cdkForTemplate(value: TemplateRef<CdkForOfContext<T>>) {
+  set cdkVirtualForTemplate(value: TemplateRef<CdkVirtualForOfContext<T>>) {
     if (value) {
       this._needsUpdate = true;
       this._template = value;
     }
   }
 
   /** Emits whenever the data in the current DataSource changes. */
-  dataStream: Observable<T[]> = this._dataSourceSubject
+  dataStream: Observable<T[]> = this._dataSourceChanges
       .pipe(
+          // Start off with null `DataSource`.
           startWith(null!),
+          // Bundle up the previous and current data sources so we can work with both.
           pairwise(),
+          // Use `_changeDataSource` to disconnect from the previous data source and connect to the
+          // new one, passing back a stream of data changes which we run through `switchMap` to give
+          // us a data stream that emits the latest data from whatever the current `DataSource` is.
           switchMap(([prev, cur]) => this._changeDataSource(prev, cur)),
+          // Replay the last emitted data when someone subscribes.
           shareReplay(1));
 
   private _differ: IterableDiffer<T> | null = null;
@@ -115,13 +123,13 @@ export class CdkForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
 
   private _renderedRange: Range;
 
-  private _templateCache: EmbeddedViewRef<CdkForOfContext<T>>[] = [];
+  private _templateCache: EmbeddedViewRef<CdkVirtualForOfContext<T>>[] = [];
 
   private _needsUpdate = false;
 
   constructor(
       private _viewContainerRef: ViewContainerRef,
-      private _template: TemplateRef<CdkForOfContext<T>>,
+      private _template: TemplateRef<CdkVirtualForOfContext<T>>,
       private _differs: IterableDiffers,
       @Host() private _viewport: CdkVirtualScrollViewport) {
     this.dataStream.subscribe(data => this._data = data);
@@ -141,7 +149,8 @@ export class CdkForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
       throw Error('Error: attempted to measure an element that isn\'t rendered.');
     }
     index -= this._renderedRange.start;
-    let view = this._viewContainerRef.get(index) as EmbeddedViewRef<CdkForOfContext<T>> | null;
+    let view = this._viewContainerRef.get(index) as
+        EmbeddedViewRef<CdkVirtualForOfContext<T>> | null;
     if (view && view.rootNodes.length) {
       let minTop = Infinity;
       let minLeft = Infinity;
@@ -172,15 +181,19 @@ export class CdkForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
   ngDoCheck() {
     if (this._differ && this._needsUpdate) {
       const changes = this._differ.diff(this._renderedItems);
-      this._applyChanges(changes);
+      if (!changes) {
+        this._updateContext();
+      } else {
+        this._applyChanges(changes);
+      }
       this._needsUpdate = false;
     }
   }
 
   ngOnDestroy() {
     this._viewport.disconnect();
 
-    this._dataSourceSubject.complete();
+    this._dataSourceChanges.complete();
     this.viewChange.complete();
 
     for (let view of this._templateCache) {
@@ -194,7 +207,7 @@ export class CdkForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
     this.viewChange.next(this._renderedRange);
     this._renderedItems = this._data.slice(this._renderedRange.start, this._renderedRange.end);
     if (!this._differ) {
-      this._differ = this._differs.find(this._renderedItems).create(this.cdkForTrackBy);
+      this._differ = this._differs.find(this._renderedItems).create(this.cdkVirtualForTrackBy);
     }
     this._needsUpdate = true;
   }
@@ -208,24 +221,24 @@ export class CdkForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
     return newDs.connect(this);
   }
 
-  /** Apply changes to the DOM. */
-  private _applyChanges(changes: IterableChanges<T> | null) {
-    // If there are no changes, just update the index and count on the view context and be done.
-    if (!changes) {
-      for (let i = 0, len = this._viewContainerRef.length; i < len; i++) {
-        let view = this._viewContainerRef.get(i) as EmbeddedViewRef<CdkForOfContext<T>>;
-        view.context.index = this._renderedRange.start + i;
-        view.context.count = this._data.length;
-        view.detectChanges();
-      }
-      return;
+  /** Update the `CdkVirtualForOfContext` for all views. */
+  private _updateContext() {
+    for (let i = 0, len = this._viewContainerRef.length; i < len; i++) {
+      let view = this._viewContainerRef.get(i) as EmbeddedViewRef<CdkVirtualForOfContext<T>>;
+      view.context.index = this._renderedRange.start + i;
+      view.context.count = this._data.length;
+      this._updateComputedContextProperties(view.context);
+      view.detectChanges();
     }
+  }
 
+  /** Apply changes to the DOM. */
+  private _applyChanges(changes: IterableChanges<T>) {
     // Detach all of the views and add them into an array to preserve their original order.
-    const previousViews: EmbeddedViewRef<CdkForOfContext<T>>[] = [];
+    const previousViews: EmbeddedViewRef<CdkVirtualForOfContext<T>>[] = [];
     for (let i = 0, len = this._viewContainerRef.length; i < len; i++) {
       previousViews.unshift(
-          this._viewContainerRef.detach()! as EmbeddedViewRef<CdkForOfContext<T>>);
+          this._viewContainerRef.detach()! as EmbeddedViewRef<CdkVirtualForOfContext<T>>);
     }
 
     // Mark the removed indices so we can recycle their views.
@@ -255,21 +268,43 @@ export class CdkForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
     }
 
     // We now have a full list of everything to be inserted, so go ahead and insert them.
+    this._insertViews(insertTuples);
+  }
+
+  /** Insert the RecordViewTuples into the container element. */
+  private _insertViews(insertTuples: RecordViewTuple<T>[]) {
     for (let i = 0, len = insertTuples.length; i < len; i++) {
       let {view, record} = insertTuples[i];
       if (view) {
         this._viewContainerRef.insert(view);
       } else {
-        view = this._viewContainerRef.createEmbeddedView(this._template,
-            new CdkForOfContext<T>(null!, this._cdkForOf, -1, -1));
+        view = this._viewContainerRef.createEmbeddedView(this._template, {
+              $implicit: null!,
+              cdkVirtualForOf: this._cdkVirtualForOf,
+              index: -1,
+              count: -1,
+              first: false,
+              last: false,
+              odd: false,
+              even: false
+            });
       }
 
       if (record) {
         view.context.$implicit = record.item as T;
       }
       view.context.index = this._renderedRange.start + i;
       view.context.count = this._data.length;
+      this._updateComputedContextProperties(view.context);
       view.detectChanges();
     }
   }
+
+  /** Update the computed properties on the `CdkVirtualForOfContext`. */
+  private _updateComputedContextProperties(context: CdkVirtualForOfContext<any>) {
+    context.first = context.index === 0;
+    context.last = context.index === context.count - 1;
+    context.even = context.index % 2 === 0;
+    context.odd = !context.even;
+  }
 }