fix(NgFor): allow default templates with ng-for-template

Closes #5161
angular · Nov 6, 2015 · 2d0c8f1 · 2d0c8f1
1 parent c6ad269
commit 2d0c8f1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/modules/angular2/src/common/directives/ng_for.ts b/modules/angular2/src/common/directives/ng_for.ts
@@ -73,7 +73,11 @@ export class NgFor implements DoCheck {
     }
   }
 
-  set ngForTemplate(value: TemplateRef) { this._templateRef = value; }
+  set ngForTemplate(value: TemplateRef) {
+    if (isPresent(value)) {
+      this._templateRef = value;
+    }
+  }
 
   doCheck() {
     if (isPresent(this._differ)) {

diff --git a/modules/angular2/test/common/directives/ng_for_spec.ts b/modules/angular2/test/common/directives/ng_for_spec.ts
@@ -329,6 +329,39 @@ export function main() {
              });
        }));
 
+    it('should use a default template if a custom one is null',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, `<ul><template ng-for #item [ng-for-of]="items"
+         [ng-for-template]="contentTpl" #i="index">{{i}}: {{item}};</template></ul>`)
+             .overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>')
+             .createAsync(ComponentUsingTestComponent)
+             .then((fixture) => {
+               var testComponent = fixture.debugElement.componentViewChildren[0];
+               testComponent.componentInstance.items = ['a', 'b', 'c'];
+               fixture.detectChanges();
+               expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
+
+               async.done();
+             });
+       }));
+
+    it('should use a custom template when both default and a custom one are present',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         tcb.overrideTemplate(TestComponent, `<ul><template ng-for #item [ng-for-of]="items"
+         [ng-for-template]="contentTpl" #i="index">{{i}}=> {{item}};</template></ul>`)
+             .overrideTemplate(
+                 ComponentUsingTestComponent,
+                 '<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
+             .createAsync(ComponentUsingTestComponent)
+             .then((fixture) => {
+               var testComponent = fixture.debugElement.componentViewChildren[0];
+               testComponent.componentInstance.items = ['a', 'b', 'c'];
+               fixture.detectChanges();
+               expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
+
+               async.done();
+             });
+       }));
   });
 }