bug(mat-table): matFooterCellDef not showing updated value when changed

[eneajaho]

trafficstars

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

When creating dynamic tables using mat-table and it's directives, I expect to pass data to the dynamic component and it to rerender everything based on data.

<table [dataSource]="data" mat-table>
  <ng-container
    *ngFor="let column of columns"
    [matColumnDef]="column.columnDef">
    <th *matHeaderCellDef mat-header-cell mat-sort-header>
      {{ column.header }}
    </th>
    <td *matCellDef="let row" mat-cell>
      {{ column.cell(row) }}
    </td>
    <td *matFooterCellDef mat-footer-cell>
      {{ column.footer }}
    </td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
  <ng-container *ngIf="showFooterRow">
    <tr *matFooterRowDef="displayedColumns" mat-footer-row></tr>
  </ng-container>
</table>

Reproduction

Reproduction: https://stackblitz.com/edit/angular-ivy-6urypw?file=src%2Fapp%2Ftest-table.component.ts

Expected Behavior

I expect to see an updated table based on the data I pass to it, and not only stuff inside matCellDef, but also inside matFooterCellDef and matHeaderCellDef.

Actual Behavior

Updating data for matCellDef works, but it doesn't re-render and update data inside matFooterCellDef and matHeaderCellDef.

Environment

Angular v14 and v15