bug(CdkTable): Table rows are re-rendered twice when columns change

[rothsandro]

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

A component with a MatTable has two *matRowDef directives, one with a when clause and a default one. When changing the list of columns after the initial render all rows will be recreated and correctly updated.

However, on the next change detection cycle the rows will be re-rendered again even if nothing has changed.

Reproduction

Steps to reproduce:

1. The MatTable has a default matRowDef and a matRowDef with a "when" clause
2. Enter a value into the first input (which will only be stored in the DOM, no ngModel)
3. Click the button to update the columns array
4. All rows will be re-renderd and your input will be lost (that's okay)
5. Again, enter a new value into the first input
6. Click the button that just calls an empty function that does nothing - but Angular will trigger change detection after the event
7. Even if nothing has changed, all rows will be re-rendered and your input will be lost - that's not okay
8. Again, enter a new value into the first input
9. Click the button again
10. No re-rendering, your input value is still there

https://stackblitz.com/edit/components-issue-2dlnew?file=src/app/example-component.ts

Expected Behavior

The rows should be re-rendered once, after the columns array has changed.

Actual Behavior

The rows are re-rendered twice, once after the columns array has changed and a second time on the next change detection cycle.

Environment

The Stackblitz repro uses v13 (provided by the issue template) but it can be reproduced with the latest version too.

Angular CLI: 14.0.6
Node: 16.13.0
Package Manager: npm 8.1.0 
OS: darwin arm64

Angular: 14.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.6
@angular-devkit/build-angular   14.0.6
@angular-devkit/core            14.0.6
@angular-devkit/schematics      14.0.6
@angular/cdk                    14.0.5
@angular/material               14.0.5
@schematics/angular             14.0.6
rxjs                            7.5.6
typescript                      4.7.4

[nickrstan]

I came across a related issue, where a component inside of a mat-cell wrapped with a ngFor, including a trackBy function, re-renders the component when a column is changed. I would expect the entire row not to change, as the table itself has a trackBy function, and the dataSource did not change.

Forked the example from material docs on dynamically changing the columns displayed. Click add/remove/shuffle and check the console for a log for every ngOnInit().

My case was not an issue with the state of an input, but performance at scale with a reactive inner component.

Edit: Using @angular/material 15.0.2