bug(COMPONENT): mat-table filter *matNoDataRow with mat-row tag

[ericvale0128]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello @angular/material development team! I really love your product and use it everyday.

But while using mat-table with mat-row, I found that *matNoDataRow with tag(not

doesn't work well. It only shows a blank row eventhough it has content with in it. I think it works with and tags, but while implementing matRipple for the rows, this bug was found.

Please have a look at it and let the users know.

Thanks, Angular Fan.

Reproduction

meeting-list.html

  ...
      <mat-row *matNoDataRow>
        <mat-cell mat-cell *matCellDef>
          No data matching the filter "{{input.value}}"
        </mat-cell>
      </mat-row>
  ...

meeting-list.ts

...
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.meetings.filter = filterValue.trim().toLowerCase();

    if (this.meetings.paginator) {
      this.meetings.paginator.firstPage();
    }
  }
...

Expected Behavior

The matNoDataRow should have the content with No data matching the filter "{{input.value}}".

Actual Behavior

The matNoDataRow should shows only a blank row.

Environment

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