feat(ngFor): support a custom template

Part of #1989

Closes #4637

modules/angular2/src/core/directives/ng_for.ts

@@ -39,7 +39,7 @@ import {isPresent, isBlank} from 'angular2/src/core/facade/lang';
  * - `<li template="ng-for #item of items; #i = index">...</li>`
  * - `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
  */
-@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);

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,
+                '<ul><template ng-for [ng-for-of]="items" [ng-for-template]="contentTpl"></template></ul>')
+             .overrideTemplate(
+                 ComponentUsingTestComponent,
+                 '<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
+             .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]; }
 }

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