bug(aria-grid): ngGridCell fails with NG0201 (No provider found for GRID_ROW) when used inside cdk-table

[joldibaev]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

When using the new @angular/aria/grid directives in combination with @angular/cdk/table, adding the ngGridCell directive to a th or td inside a cdkColumnDef results in a runtime error: NG0201: No provider found for InjectionToken GRID_ROW.

It seems that because cdk-table renders rows and cells using templates and portals, the DI tree is broken, and ngGridCell cannot find the parent ngGridRow directive, even though they are visually nested in the DOM.

@Component({
  imports: [CdkTableModule, Grid, GridRow, GridCell],
  template: `
    <table ngGrid cdk-table [dataSource]="data">
      @for (column of columns; track column) {
        <ng-container [cdkColumnDef]="column">
          <th ngGridCell cdk-header-cell *cdkHeaderCellDef>{{ column }}</th>
          <td ngGridCell cdk-cell *cdkCellDef="let row">{{ row[column] }}</td>
        </ng-container>
      }
      <tr ngGridRow cdk-header-row *cdkHeaderRowDef="columns"></tr>
      <tr ngGridRow cdk-row *cdkRowDef="let row; columns: columns"></tr>
    </table>
  `
})
export class MyTable { ... }

Expected Behavior
The ngGridCell should be able to locate the GridRow provider when rendered within a cdk-table row, or the package should provide a mechanism to link them when standard DI fails due to template portaling.

Actual Behavior
The application crashes with: ERROR ɵNotFound: NG0201: No provider found for InjectionToken GRID_ROW. Source: Standalone[_App]

Please provide a link to a minimal reproduction of the bug

https://github.com/joldibaev/trade-trade3-ng/tree/table/src/app/components/table

Please provide the exception or error you saw

main.ts:5 ERROR ɵNotFound: NG0201: No provider found for `InjectionToken GRID_ROW`. Source: Standalone[_App]. Find more at https://v21.angular.dev/errors/NG0201
    at createRuntimeError (_untracked-chunk.mjs:595:17)
    at NullInjector.get (_untracked-chunk.mjs:876:21)
    at R3Injector.get (_untracked-chunk.mjs:1201:27)
    at R3Injector.get (_untracked-chunk.mjs:1201:27)
    at R3Injector.get (_untracked-chunk.mjs:1201:27)
    at ChainedInjector.get (_debug_node-chunk.mjs:7490:32)
    at lookupTokenUsingModuleInjector (_debug_node-chunk.mjs:890:31)
    at getOrCreateInjectable (_debug_node-chunk.mjs:913:10)
    at ɵɵdirectiveInject (_debug_node-chunk.mjs:7524:17)
    at ɵɵinject (_untracked-chunk.mjs:677:40)
handleError @ _untracked-chunk.mjs:2581
(anonymous) @ _untracked-chunk.mjs:2597
runOutsideAngular @ _untracked-chunk.mjs:2556
(anonymous) @ _untracked-chunk.mjs:2590
_loadComponent @ _debug_node-chunk.mjs:12007
(anonymous) @ _debug_node-chunk.mjs:11878
run @ _untracked-chunk.mjs:2550
bootstrapImpl @ _debug_node-chunk.mjs:11846
bootstrap @ _debug_node-chunk.mjs:11842
(anonymous) @ core.mjs:672
Promise.then
(anonymous) @ core.mjs:654
_callAndReportToErrorHandler @ core.mjs:700
(anonymous) @ core.mjs:649
run @ _untracked-chunk.mjs:2550
bootstrap @ core.mjs:613
internalCreateApplication @ core.mjs:1743
bootstrapApplication @ _browser-chunk.mjs:271
(anonymous) @ main.ts:5
_debug_node-chunk.mjs:10538 Angular is running in development mode.

Please provide the environment you discovered this bug in (run ng version)

- Angular: 21.0.0
- CDK: 21.0.4 (implicit via @angular/build)
- ARIA: 21.0.5
- Package Manager: npm 10.9.4

Anything else?

No response

[crisbeto]

I spent a bit of time looking into it. The problem is that DI works based on where the element is declared and since in this case the cells are declared outside of the row, the resolution doesn't work. We could make it work for the column with some tweaks to the CDK table, but the row also looks for the items using contentChildren which would be harder.

[stephenlautier]

It seems that most of the aria components suffer from the same issue if you try to rewrap to customize, have the same exact issue with the ngListbox/ngCombobox ☹️