diff --git a/packages/common/src/directives/ng_if.ts b/packages/common/src/directives/ng_if.ts index 5b1a2b8543..cefb3d0771 100644 --- a/packages/common/src/directives/ng_if.ts +++ b/packages/common/src/directives/ng_if.ts @@ -117,7 +117,7 @@ export class NgIf { } @Input() - set ngIfThen(templateRef: TemplateRef) { + set ngIfThen(templateRef: TemplateRef|null) { assertTemplate('ngIfThen', templateRef); this._thenTemplateRef = templateRef; this._thenViewRef = null; // clear previous view if any. @@ -125,7 +125,7 @@ export class NgIf { } @Input() - set ngIfElse(templateRef: TemplateRef) { + set ngIfElse(templateRef: TemplateRef|null) { assertTemplate('ngIfElse', templateRef); this._elseTemplateRef = templateRef; this._elseViewRef = null; // clear previous view if any. @@ -166,9 +166,9 @@ export class NgIfContext { public ngIf: any = null; } -function assertTemplate(property: string, templateRef: TemplateRef): void { - const isTemplateRef = templateRef.createEmbeddedView != null; - if (!isTemplateRef) { +function assertTemplate(property: string, templateRef: TemplateRef| null): void { + const isTemplateRefOrNull = !!(!templateRef || templateRef.createEmbeddedView); + if (!isTemplateRefOrNull) { throw new Error(`${property} must be a TemplateRef, but received '${stringify(templateRef)}'.`); } } diff --git a/packages/common/test/directives/ng_if_spec.ts b/packages/common/test/directives/ng_if_spec.ts index ae8312146e..5d41092089 100644 --- a/packages/common/test/directives/ng_if_spec.ts +++ b/packages/common/test/directives/ng_if_spec.ts @@ -138,7 +138,7 @@ import {expect} from '@angular/platform-browser/testing/src/matchers'; expect(fixture.nativeElement).toHaveText('hello'); })); - describe('else', () => { + describe('then/else templates', () => { it('should support else', async(() => { const template = 'TRUE' + 'FALSE'; @@ -169,6 +169,37 @@ import {expect} from '@angular/platform-browser/testing/src/matchers'; expect(fixture.nativeElement).toHaveText('ELSE'); })); + it('should support removing the then/else templates', () => { + const template = ` + Template`; + + fixture = createTestComponent(template); + const comp = fixture.componentInstance; + // then template + comp.booleanCondition = true; + + comp.nestedBooleanCondition = true; + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText('Template'); + + comp.nestedBooleanCondition = false; + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText(''); + + // else template + comp.booleanCondition = true; + + comp.nestedBooleanCondition = true; + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText('Template'); + + comp.nestedBooleanCondition = false; + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText(''); + }); + it('should support dynamic else', async(() => { const template = 'TRUE' + diff --git a/tools/public_api_guard/common/common.d.ts b/tools/public_api_guard/common/common.d.ts index 37fe2ba69e..b40100e9df 100644 --- a/tools/public_api_guard/common/common.d.ts +++ b/tools/public_api_guard/common/common.d.ts @@ -275,8 +275,8 @@ export declare class NgForOfContext { /** @stable */ export declare class NgIf { ngIf: any; - ngIfElse: TemplateRef; - ngIfThen: TemplateRef; + ngIfElse: TemplateRef | null; + ngIfThen: TemplateRef | null; constructor(_viewContainer: ViewContainerRef, templateRef: TemplateRef); }