feat(common): Add an inherit injector option for ngTemplateOutlet

Adds an option (`ngTemplateOutletInjector="inherit"`) that instructs the
ngTemplateOutlet to inherit its injector from its place in the
instantiated DOM.

packages/common/src/directives/ng_template_outlet.ts

@@ -9,10 +9,10 @@
 import {
   Directive,
   EmbeddedViewRef,
+  inject,
   Injector,
   Input,
   OnChanges,
-  SimpleChange,
   SimpleChanges,
   TemplateRef,
   ViewContainerRef,
@@ -62,8 +62,15 @@ export class NgTemplateOutlet<C = unknown> implements OnChanges {
    */
   @Input() public ngTemplateOutlet: TemplateRef<C> | null = null;
 
-  /** Injector to be used within the embedded view. */
-  @Input() public ngTemplateOutletInjector: Injector | null = null;
+  /**
+   * Injector to be used within the embedded view. A value of "inherit" can be used to indicate
+   * that the injector should be inherited from the template's location in the instantiated DOM.
+   */
+  @Input() public ngTemplateOutletInjector: Injector | 'inherit' | null = null;
+
+  protected injector = inject(Injector);
+
+  private _childInjector: Injector | undefined;
 
   constructor(private _viewContainerRef: ViewContainerRef) {}
 
@@ -85,11 +92,23 @@ export class NgTemplateOutlet<C = unknown> implements OnChanges {
       // without having to destroy and re-create views whenever the context changes.
       const viewContext = this._createContextForwardProxy();
       this._viewRef = viewContainerRef.createEmbeddedView(this.ngTemplateOutlet, viewContext, {
-        injector: this.ngTemplateOutletInjector ?? undefined,
+        injector: this._getInjector(),
       });
     }
   }
 
+  /**
+   * Gets the injector to use for the template outlet based on ngTemplateOutletInjector.
+   */
+  private _getInjector(): Injector | undefined {
+    if (this.ngTemplateOutletInjector === 'inherit') {
+      this._childInjector =
+        this._childInjector ?? Injector.create({providers: [], parent: this.injector});
+      return this._childInjector;
+    }
+    return this.ngTemplateOutletInjector ?? undefined;
+  }
+
   /**
    * We need to re-create existing embedded view if either is true:
    * - the outlet changed.

packages/common/test/directives/ng_template_outlet_spec.ts

@@ -48,6 +48,7 @@ describe('NgTemplateOutlet', () => {
         DestroyableCmpt,
         MultiContextComponent,
         InjectValueComponent,
+        ProvideValueComponent,
       ],
       imports: [CommonModule],
       providers: [DestroyedSpyService],
@@ -329,6 +330,17 @@ describe('NgTemplateOutlet', () => {
     detectChangesAndExpectText('Hello world');
   }));
 
+  it('should be able to inherit injector', () => {
+    const template = `
+      <ng-template #tpl><inject-value></inject-value></ng-template>
+      <provide-value>
+        <ng-container *ngTemplateOutlet="tpl; injector: 'inherit'"></ng-container>
+      </provide-value>
+    `;
+    fixture = createTestComponent(template, [{provide: templateToken, useValue: 'root'}]);
+    detectChangesAndExpectText('Hello provide-value');
+  });
+
   it('should be available as a standalone directive', () => {
     @Component({
       selector: 'test-component',
@@ -401,6 +413,13 @@ class TestComponent {
   injector: Injector | null = null;
 }
 
+@Component({
+  selector: 'provide-value',
+  template: '<ng-content />',
+  providers: [{provide: templateToken, useValue: 'provide-value'}],
+})
+class ProvideValueComponent {}
+
 @Component({
   selector: 'inject-value',
   template: 'Hello {{tokenValue}}',