feat(common): accept undefined inputs in NgTemplateOutlet (#61404)

rslawik · atscott · commit 82327f2092ac · 2025-05-25T14:26:42.000-07:00
Extend types of inputs to include `undefined` to avoid `?? null` when using singals (e.g. `viewChild`). Fixes #51225 PR Close #61404
diff --git a/goldens/public-api/common/index.api.md b/goldens/public-api/common/index.api.md
@@ -716,9 +716,9 @@ export class NgTemplateOutlet<C = unknown> implements OnChanges {
     constructor(_viewContainerRef: ViewContainerRef);
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
-    ngTemplateOutlet: TemplateRef<C> | null;
-    ngTemplateOutletContext: C | null;
-    ngTemplateOutletInjector: Injector | null;
+    ngTemplateOutlet: TemplateRef<C> | null | undefined;
+    ngTemplateOutletContext: C | null | undefined;
+    ngTemplateOutletInjector: Injector | null | undefined;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgTemplateOutlet<any>, "[ngTemplateOutlet]", never, { "ngTemplateOutletContext": { "alias": "ngTemplateOutletContext"; "required": false; }; "ngTemplateOutlet": { "alias": "ngTemplateOutlet"; "required": false; }; "ngTemplateOutletInjector": { "alias": "ngTemplateOutletInjector"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
diff --git a/packages/common/src/directives/ng_template_outlet.ts b/packages/common/src/directives/ng_template_outlet.ts
@@ -54,15 +54,15 @@ export class NgTemplateOutlet<C = unknown> implements OnChanges {
    * declarations.
    * Using the key `$implicit` in the context object will set its value as default.
    */
-  @Input() public ngTemplateOutletContext: C | null = null;
+  @Input() public ngTemplateOutletContext: C | null | undefined = null;
 
   /**
    * A string defining the template reference and optionally the context object for the template.
    */
-  @Input() public ngTemplateOutlet: TemplateRef<C> | null = null;
+  @Input() public ngTemplateOutlet: TemplateRef<C> | null | undefined = null;
 
   /** Injector to be used within the embedded view. */
-  @Input() public ngTemplateOutletInjector: Injector | null = null;
+  @Input() public ngTemplateOutletInjector: Injector | null | undefined = null;
 
   constructor(private _viewContainerRef: ViewContainerRef) {}
 
diff --git a/packages/common/test/directives/ng_template_outlet_spec.ts b/packages/common/test/directives/ng_template_outlet_spec.ts
@@ -70,6 +70,12 @@ describe('NgTemplateOutlet', () => {
     detectChangesAndExpectText('');
   }));
 
+  it('should do nothing if templateRef is `undefined`', waitForAsync(() => {
+    const template = `<ng-container [ngTemplateOutlet]="undefined"></ng-container>`;
+    fixture = createTestComponent(template);
+    detectChangesAndExpectText('');
+  }));
+
   it('should insert content specified by TemplateRef', waitForAsync(() => {
     const template =
       `<ng-template #tpl>foo</ng-template>` +
@@ -93,6 +99,21 @@ describe('NgTemplateOutlet', () => {
     detectChangesAndExpectText('');
   }));
 
+  it('should clear content if TemplateRef becomes `undefined`', waitForAsync(() => {
+    const template =
+      `<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template></tpl-refs>` +
+      `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
+    fixture = createTestComponent(template);
+    fixture.detectChanges();
+    const refs = fixture.debugElement.children[0].references!['refs'];
+
+    setTplRef(refs.tplRefs.first);
+    detectChangesAndExpectText('foo');
+
+    setTplRef(undefined);
+    detectChangesAndExpectText('');
+  }));
+
   it('should swap content if TemplateRef changes', waitForAsync(() => {
     const template =
       `<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template><ng-template>bar</ng-template></tpl-refs>` +
@@ -117,6 +138,14 @@ describe('NgTemplateOutlet', () => {
     detectChangesAndExpectText('foo');
   }));
 
+  it('should display template if context is `undefined`', waitForAsync(() => {
+    const template =
+      `<ng-template #tpl>foo</ng-template>` +
+      `<ng-container *ngTemplateOutlet="tpl; context: undefined"></ng-container>`;
+    fixture = createTestComponent(template);
+    detectChangesAndExpectText('foo');
+  }));
+
   it('should reflect initial context and changes', waitForAsync(() => {
     const template =
       `<ng-template let-foo="foo" #tpl>{{foo}}</ng-template>` +
