diff --git a/modules/angular2/src/core/directives/ng_for.ts b/modules/angular2/src/core/directives/ng_for.ts index 51f574f13e..74eecfd764 100644 --- a/modules/angular2/src/core/directives/ng_for.ts +++ b/modules/angular2/src/core/directives/ng_for.ts @@ -39,7 +39,7 @@ import {isPresent, isBlank} from 'angular2/src/core/facade/lang'; * - `
  • ...
  • ` * - `` */ -@Directive({selector: '[ng-for][ng-for-of]', inputs: ['ngForOf']}) +@Directive({selector: '[ng-for][ng-for-of]', inputs: ['ngForOf', 'ngForTemplate']}) export class NgFor implements DoCheck { _ngForOf: any; private _differ: IterableDiffer; @@ -54,6 +54,8 @@ export class NgFor implements DoCheck { } } + set ngForTemplate(value: TemplateRef) { this._templateRef = value; } + doCheck() { if (isPresent(this._differ)) { var changes = this._differ.diff(this._ngForOf); diff --git a/modules/angular2/test/core/directives/ng_for_spec.ts b/modules/angular2/test/core/directives/ng_for_spec.ts index fec85c40cb..4bd5a613fd 100644 --- a/modules/angular2/test/core/directives/ng_for_spec.ts +++ b/modules/angular2/test/core/directives/ng_for_spec.ts @@ -15,7 +15,7 @@ import { import {ListWrapper} from 'angular2/src/core/facade/collection'; -import {Component, View} from 'angular2/angular2'; +import {Component, View, TemplateRef, ContentChild} from 'angular2/angular2'; import {NgFor} from 'angular2/src/core/directives/ng_for'; @@ -309,6 +309,25 @@ export function main() { }); })); + it('should allow to use a custom template', + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideTemplate( + TestComponent, + '') + .overrideTemplate( + ComponentUsingTestComponent, + '
  • {{i}}: {{item}};
  • ') + .createAsync(ComponentUsingTestComponent) + .then((rootTC) => { + var testComponent = rootTC.debugElement.componentViewChildren[0]; + testComponent.componentInstance.items = ['a', 'b', 'c']; + rootTC.detectChanges(); + expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;'); + + async.done(); + }); + })); + }); } @@ -319,6 +338,14 @@ class Foo { @Component({selector: 'test-cmp'}) @View({directives: [NgFor]}) class TestComponent { + @ContentChild(TemplateRef) contentTpl: TemplateRef; + items: any; + constructor() { this.items = [1, 2]; } +} + +@Component({selector: 'outer-cmp'}) +@View({directives: [TestComponent]}) +class ComponentUsingTestComponent { items: any; constructor() { this.items = [1, 2]; } } diff --git a/modules/angular2/test/public_api_spec.ts b/modules/angular2/test/public_api_spec.ts index bee365513c..2f095e006f 100644 --- a/modules/angular2/test/public_api_spec.ts +++ b/modules/angular2/test/public_api_spec.ts @@ -648,6 +648,7 @@ var NG_API = [ 'NgFor', 'NgFor.doCheck()', 'NgFor.ngForOf=', + 'NgFor.ngForTemplate=', 'NgForm', 'NgForm.addControl()', 'NgForm.addControlGroup()',