feat(ngFor): Support convenience view local in ngFor

gionkunz · alxhub · commit ccff17599a7a · 2016-04-11T21:27:48.000Z
Closes #8013
diff --git a/modules/angular2/src/common/directives/ng_for.ts b/modules/angular2/src/common/directives/ng_for.ts
@@ -26,6 +26,8 @@ import {BaseException} from "../../facade/exceptions";
  * `NgFor` provides several exported values that can be aliased to local variables:
  *
  * * `index` will be set to the current loop iteration for each template context.
+ * * `first` will be set to a boolean value indicating whether the item is the first one in the
+ *   iteration.
  * * `last` will be set to a boolean value indicating whether the item is the last one in the
  *   iteration.
  * * `even` will be set to a boolean value indicating whether this item has an even index.
@@ -126,6 +128,7 @@ export class NgFor implements DoCheck {
 
     for (var i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
       var viewRef = <EmbeddedViewRef>this._viewContainer.get(i);
+      viewRef.setLocal('first', i === 0);
       viewRef.setLocal('last', i === ilen - 1);
     }
 
diff --git a/modules/angular2/test/common/directives/ng_for_spec.ts b/modules/angular2/test/common/directives/ng_for_spec.ts
@@ -298,6 +298,25 @@ export function main() {
              });
        }));
 
+    it('should display first item correctly',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         var template =
+             '<div><copy-me template="ngFor: var item of items; var isFirst=first">{{isFirst.toString()}}</copy-me></div>';
+
+         tcb.overrideTemplate(TestComponent, template)
+             .createAsync(TestComponent)
+             .then((fixture) => {
+               fixture.debugElement.componentInstance.items = [0, 1, 2];
+               fixture.detectChanges();
+               expect(fixture.debugElement.nativeElement).toHaveText('truefalsefalse');
+
+               fixture.debugElement.componentInstance.items = [2, 1];
+               fixture.detectChanges();
+               expect(fixture.debugElement.nativeElement).toHaveText('truefalse');
+               async.done();
+             });
+       }));
+
     it('should display last item correctly',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var template =

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,8 @@ import {BaseException} from "../../facade/exceptions";`
`26`	`26`	* `NgFor` provides several exported values that can be aliased to local variables:
`27`	`27`	`*`
`28`	`28`	* * `index` will be set to the current loop iteration for each template context.
	`29`	+ * * `first` will be set to a boolean value indicating whether the item is the first one in the
	`30`	`+ * iteration.`
`29`	`31`	* * `last` will be set to a boolean value indicating whether the item is the last one in the
`30`	`32`	`* iteration.`
`31`	`33`	* * `even` will be set to a boolean value indicating whether this item has an even index.
`@@ -126,6 +128,7 @@ export class NgFor implements DoCheck {`
`126`	`128`
`127`	`129`	`for (var i = 0, ilen = this._viewContainer.length; i < ilen; i++) {`
`128`	`130`	`var viewRef = <EmbeddedViewRef>this._viewContainer.get(i);`
	`131`	`+ viewRef.setLocal('first', i === 0);`
`129`	`132`	`viewRef.setLocal('last', i === ilen - 1);`
`130`	`133`	`}`
`131`	`134`