fix(common): then and else template might be set to null (#22298)

PR Close #22298

packages/common/src/directives/ng_if.ts

@@ -117,7 +117,7 @@ export class NgIf {
   }
 
   @Input()
-  set ngIfThen(templateRef: TemplateRef<NgIfContext>) {
+  set ngIfThen(templateRef: TemplateRef<NgIfContext>|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<NgIfContext>) {
+  set ngIfElse(templateRef: TemplateRef<NgIfContext>|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<any>): void {
+function assertTemplate(property: string, templateRef: TemplateRef<any>| null): void {
-  const isTemplateRef = templateRef.createEmbeddedView != null;
+  const isTemplateRefOrNull = !!(!templateRef || templateRef.createEmbeddedView);
-  if (!isTemplateRef) {
+  if (!isTemplateRefOrNull) {
     throw new Error(`${property} must be a TemplateRef, but received '${stringify(templateRef)}'.`);
   }
 }

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 = '<span *ngIf="booleanCondition; else elseBlock">TRUE</span>' +
                '<ng-template #elseBlock>FALSE</ng-template>';
@@ -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 = `<span *ngIf="booleanCondition;
+            then nestedBooleanCondition ? tplRef : null;
+            else nestedBooleanCondition ? tplRef : null"></span>
+        <ng-template #tplRef>Template</ng-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 =
                '<span *ngIf="booleanCondition; else nestedBooleanCondition ? b1 : b2">TRUE</span>' +

tools/public_api_guard/common/common.d.ts

@@ -275,8 +275,8 @@ export declare class NgForOfContext<T> {
 /** @stable */
 export declare class NgIf {
     ngIf: any;
-    ngIfElse: TemplateRef<NgIfContext>;
+    ngIfElse: TemplateRef<NgIfContext> | null;
-    ngIfThen: TemplateRef<NgIfContext>;
+    ngIfThen: TemplateRef<NgIfContext> | null;
     constructor(_viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>);
 }