angular · arturovt · Sep 3, 2026
diff --git a/adev/src/content/guide/components/queries.md b/adev/src/content/guide/components/queries.md
@@ -225,6 +225,30 @@ the `TemplateRef` associated with that element.
 
 Developers most commonly use `read` to retrieve `ElementRef` and `TemplateRef`.
 
+You can also pass `Injector` to `read`.
+
+```angular-ts
+@Component({
+  selector: 'custom-table',
+  template: `
+    <third-party-table #inner>
+      <ng-template>
+        <ng-container [ngTemplateOutlet]="columns()" [ngTemplateOutletInjector]="innerInjector()" />
+      </ng-template>
+    </third-party-table>
+  `,
+})
+export class CustomTable {
+  columns = contentChild(TemplateRef);
+  innerInjector = viewChild('inner', {read: Injector});
+}
+```
+
+The above example retrieves the node injector of the `third-party-table` element, meaning the
+injector as seen from that element's position in the tree. Passing it to `NgTemplateOutlet` through
+`ngTemplateOutletInjector` lets directives in the projected template inject values that the
+third-party component provides.
+
 ### Content descendants
 
 By default, `contentChildren` queries find only _direct_ children of the component and do not traverse into descendants.

diff --git a/packages/core/src/metadata/di.ts b/packages/core/src/metadata/di.ts
@@ -146,7 +146,7 @@ export interface ContentChildrenDecorator {
    *   * Any provider defined on the injector of the component that is matched by the `selector` of
    * this query
    *   * Any provider defined through a string token (e.g. `{provide: 'token', useValue: 'val'}`)
-   *   * `TemplateRef`, `ElementRef`, and `ViewContainerRef`
+   *   * `TemplateRef`, `ElementRef`, `ViewContainerRef`, and `Injector`
    *
    * @usageNotes
    *
@@ -249,7 +249,7 @@ export interface ContentChildDecorator {
    *   * Any provider defined on the injector of the component that is matched by the `selector` of
    * this query
    *   * Any provider defined through a string token (e.g. `{provide: 'token', useValue: 'val'}`)
-   *   * `TemplateRef`, `ElementRef`, and `ViewContainerRef`
+   *   * `TemplateRef`, `ElementRef`, `ViewContainerRef`, and `Injector`
    *
    * Difference between dynamic and static queries:
    *
@@ -357,7 +357,7 @@ export interface ViewChildrenDecorator {
    *   * Any provider defined on the injector of the component that is matched by the `selector` of
    * this query
    *   * Any provider defined through a string token (e.g. `{provide: 'token', useValue: 'val'}`)
-   *   * `TemplateRef`, `ElementRef`, and `ViewContainerRef`
+   *   * `TemplateRef`, `ElementRef`, `ViewContainerRef`, and `Injector`
    *
    * @usageNotes
    *
@@ -444,7 +444,7 @@ export interface ViewChildDecorator {
    *   * Any provider defined on the injector of the component that is matched by the `selector` of
    * this query
    *   * Any provider defined through a string token (e.g. `{provide: 'token', useValue: 'val'}`)
-   *   * `TemplateRef`, `ElementRef`, and `ViewContainerRef`
+   *   * `TemplateRef`, `ElementRef`, `ViewContainerRef`, and `Injector`
    *
    * Difference between dynamic and static queries:
    *   * Dynamic queries \(`static: false`\) - The query resolves before the `ngAfterViewInit()`

diff --git a/packages/core/src/render3/queries/query.ts b/packages/core/src/render3/queries/query.ts
@@ -9,6 +9,7 @@
 // We are temporarily importing the existing viewEngine_from core so we can be sure we are
 // correctly implementing its interfaces for backwards compatibility.
 
+import {Injector} from '../../di/injector';
 import {ProviderToken} from '../../di/provider_token';
 import {createElementRef, ElementRef as ViewEngine_ElementRef} from '../../linker/element_ref';
 import {QueryList} from '../../linker/query_list';
@@ -18,7 +19,7 @@ import {assertDefined, assertIndexInRange, assertNumber, throwError} from '../..
 import {stringify} from '../../util/stringify';
 
 import {assertFirstCreatePass, assertLContainer} from '../assert';
-import {getNodeInjectable, locateDirectiveOrProvider} from '../di';
+import {getNodeInjectable, locateDirectiveOrProvider, NodeInjector} from '../di';
 import {CONTAINER_HEADER_OFFSET, LContainer, MOVED_VIEWS} from '../interfaces/container';
 import {
   TContainerNode,
@@ -287,6 +288,7 @@ class TQuery_ implements TQuery {
         if (
           read === ViewEngine_ElementRef ||
           read === ViewContainerRef ||
+          read === Injector ||
           (read === ViewEngine_TemplateRef && tNode.type & TNodeType.Container)
         ) {
           this.addMatch(tNode.index, -2);
@@ -370,10 +372,12 @@ function createSpecialToken(lView: LView, tNode: TNode, read: any): any {
       tNode as TElementNode | TContainerNode | TElementContainerNode,
       lView,
     );
+  } else if (read === Injector) {
+    return new NodeInjector(tNode as TElementNode | TContainerNode | TElementContainerNode, lView);
   } else {
     ngDevMode &&
       throwError(
-        `Special token to read should be one of ElementRef, TemplateRef or ViewContainerRef but got ${stringify(
+        `Special token to read should be one of ElementRef, TemplateRef, ViewContainerRef or Injector but got ${stringify(
           read,
         )}.`,
       );

diff --git a/packages/core/test/acceptance/authoring/signal_queries_spec.ts b/packages/core/test/acceptance/authoring/signal_queries_spec.ts
@@ -16,6 +16,9 @@ import {
   Directive,
   ElementRef,
   EnvironmentInjector,
+  inject,
+  InjectionToken,
+  Injector,
   QueryList,
   ViewChild,
   viewChild,
@@ -270,6 +273,32 @@ describe('queries as signals', () => {
       const node = fixture.componentInstance.viewChildQuery![SIGNAL] as {debugName: string};
       expect(node.debugName).toBe('viewChildQuery');
     });
+
+    it('should read the node injector of the queried element with `read: Injector`', () => {
+      const TOKEN = new InjectionToken<string>('TOKEN');
+
+      @Directive({
+        selector: '[provider]',
+        providers: [{provide: TOKEN, useValue: 'from directive'}],
+      })
+      class ProviderDir {}
+
+      @Component({
+        imports: [ProviderDir],
+        template: `<div #el provider></div>`,
+      })
+      class AppComponent {
+        elInjector = viewChild('el', {read: Injector});
+        ownInjector = inject(Injector);
+      }
+
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+
+      const queried = fixture.componentInstance.elInjector()!;
+      expect(queried.get(TOKEN)).toBe('from directive');
+      expect(fixture.componentInstance.ownInjector.get(TOKEN, null)).toBeNull();
+    });
   });
 
   describe('content queries', () => {

diff --git a/packages/core/test/acceptance/query_spec.ts b/packages/core/test/acceptance/query_spec.ts
@@ -16,7 +16,9 @@ import {
   ElementRef,
   EventEmitter,
   forwardRef,
+  inject,
   InjectionToken,
+  Injector,
   Input,
   provideZoneChangeDetection,
   QueryList,
@@ -1775,6 +1777,55 @@ describe('query logic', () => {
       expect(qList.first).toBeInstanceOf(ViewContainerRef);
     });
 
+    it('should read Injector from element nodes when explicitly asked for', () => {
+      @Component({
+        template: `<div #foo></div>`,
+        changeDetection: ChangeDetectionStrategy.Eager,
+      })
+      class TestCmp {
+        @ViewChild('foo', {read: Injector}) query?: Injector;
+      }
+
+      const fixture = TestBed.createComponent(TestCmp);
+      fixture.detectChanges();
+
+      const injector = fixture.componentInstance.query!;
+      expect(injector).toBeDefined();
+      // The returned value behaves like an injector rooted at the queried node.
+      expect(injector.get(ElementRef).nativeElement).toBe(
+        fixture.debugElement.children[0].nativeElement,
+      );
+    });
+
+    it('should read the node injector of the queried element', () => {
+      const TOKEN = new InjectionToken<string>('TOKEN');
+
+      @Directive({
+        selector: '[provider]',
+        providers: [{provide: TOKEN, useValue: 'from directive'}],
+      })
+      class ProviderDir {}
+
+      @Component({
+        imports: [ProviderDir],
+        template: `<div #foo provider></div>`,
+        changeDetection: ChangeDetectionStrategy.Eager,
+      })
+      class TestCmp {
+        @ViewChild('foo', {read: Injector}) injector?: Injector;
+        ownInjector = inject(Injector);
+      }
+
+      const fixture = TestBed.createComponent(TestCmp);
+      fixture.detectChanges();
+
+      const queried = fixture.componentInstance.injector!;
+      // The queried injector sees the provider declared on the element's directive...
+      expect(queried.get(TOKEN)).toBe('from directive');
+      // ...which is not visible from the component's own injector.
+      expect(fixture.componentInstance.ownInjector.get(TOKEN, null)).toBeNull();
+    });
+
     it('should not throw when hydration metadata has no serialized container data', () => {
       @Component({
         template: `<div #foo></div>`,