bug(MatTable): *matNoDataRow not properly styling in flex mode

[dkimmich-onventis]

trafficstars

Reproduction

• https://stackblitz.com/edit/components-issue-table-flex-no-data-row

Steps to reproduce:

1. Use *matNoDataRow in a flex MatTable

Expected Behavior

No Data Row is properly styled with a padding, like in the non-flex table:

Actual Behavior

No Data Row is missing proper styling:

Additional information

The code for the *matNoDataRow in non-flex tables is part of the documentation:

<tr class="mat-row" *matNoDataRow>
  <td class="mat-cell" colspan="4">No data</td>
</tr>

But how to do it with the flex table? I've tried several things, no luck so far:

<div class="mat-row" *matNoDataRow>
  <div class="mat-cell">No data</div>
</div>

<div *matNoDataRow>No data</div>

<div mat-row *matNoDataRow>
  <div mat-cell>No data</div>
</div>

<mat-row *matNoDataRow>
  <mat-cell>No data</mat-cell>
</mat-row>

Sure I could add the styles manually, but I was hoping that there was an official solution.

Environment

• Angular: 11
• CDK/Material: 11
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): all

[dexster]

Does the commit include a fix for this error when using matNoDataRow on a flex table or do I need to submit a new issue?

core.js:6456 ERROR NullInjectorError: R3InjectorError(StorybookModule)[CdkColumnDef -> CdkColumnDef -> CdkColumnDef]: 
  NullInjectorError: No provider for CdkColumnDef!

Broken

<mat-row *matNoDataRow>
  <mat-cell>No data matching the filter</mat-cell>
 </mat-row> 

Works

 <tr class="mat-row" *matNoDataRow>
   <td class="mat-cell" colspan="4">No data matching the filter"</td>
 </tr>

[bugoutfr]

Does the commit include a fix for this error when using matNoDataRow on a flex table or do I need to submit a new issue?

core.js:6456 ERROR NullInjectorError: R3InjectorError(StorybookModule)[CdkColumnDef -> CdkColumnDef -> CdkColumnDef]: 
  NullInjectorError: No provider for CdkColumnDef!

Broken

<mat-row *matNoDataRow>
  <mat-cell>No data matching the filter</mat-cell>
 </mat-row> 

Works

 <tr class="mat-row" *matNoDataRow>
   <td class="mat-cell" colspan="4">No data matching the filter"</td>
 </tr>

Hello, this bug still exists in Angular 14.2.6. Will it be fixed someday?

[argentum388]

It seems it exists in 15 I'm using this css for replacing mat-cell .mat-mdc-no-data-row::before { content: 'No data'; margin: 0 auto; }

[arademacker]

I can confirm the error still exists in Angular + Angular Material v18.2.3.

The error message I get when using mat-row/mat-cell as tags or attributes:

RROR NullInjectorError: R3InjectorError(_TicketsModule)[_CdkColumnDef -> _CdkColumnDef -> _CdkColumnDef -> _CdkColumnDef -> _CdkColumnDef]: 
  NullInjectorError: No provider for _CdkColumnDef!
    at NullInjector.get (core.mjs:1635:21)
    at R3Injector.get (core.mjs:3017:27)
    at R3Injector.get (core.mjs:3017:27)
    at R3Injector.get (core.mjs:3017:27)
    at R3Injector.get (core.mjs:3017:27)
    at R3Injector.get (core.mjs:3017:27)
    at ChainedInjector.get (core.mjs:5285:32)
    at lookupTokenUsingModuleInjector (core.mjs:5628:31)
    at getOrCreateInjectable (core.mjs:5674:10)
    at ɵɵdirectiveInject (core.mjs:11583:17)

Neither attribute directives

<tr mat-row *matNoDataRow>
    <td mat-cell>No entries</td>
</tr>

nor component tags work,

<mat-row *matNoDataRow>
    <mat-cell>No entries</mat-cell>
</mat-row>

Class based styling works,

<tr class="mat-row" *matNoDataRow>
    <td class="mat-cell">No entries</td>
</tr>

but obviously lacks automatic (material) styling.

Is this still being worked on?

[b0939261761]

in angular-material 20.2 don't work

<mat-row *matNoDataRow>
    <mat-cell>No entries</mat-cell>
</mat-row>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}