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()',