angular · rslawik · May 16, 2025
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>` +