feat(ngFor): support a custom template

tbosch · tbosch · commit 6207b1af8838 · 2015-10-09T21:52:59.000Z
Part of #1989 Closes #4637
diff --git 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';
  * - `<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);
diff --git 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,
+                '<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]; }
 }
diff --git 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()',
