diff --git a/modules/angular2/src/common/directives/ng_for.ts b/modules/angular2/src/common/directives/ng_for.ts index 8cff678e70..07267ee632 100644 --- 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 = 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 index 12eecb4e2d..f89507ef43 100644 --- 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 = + '
{{isFirst.toString()}}
'; + + 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 =