bug(Table): Angular 9: caching column definitions breaks nesting tables

[dtarjeft]

Reproduction

Steps to reproduce:

1. Open this StackBlitz from this StackOverflow answer regarding nested material tables using Angular 8.
2. Observe that clicking on table rows causes the table to expand/collapse and show nested data.
3. Upgrade Angular to 9.0.5. For convenience, here's a StackBlitz with this completed.

Expected Behavior

Nested material tables in each mat-row with those columns defined, opening and closing as intended. No errors.

Actual Behavior

Expanding a row works the first time, then fails, leaving the table in a bad state throwing errors to the effect of Duplicate column definition name provided - the expansion/collapse functionality completely stops working at this point.

One can work around this by creating a dummy component who's sole purpose is to pass the data to another instance of mat-table - I've shown this in a fork of the Angular 9 StackBlitz. Note: I didn't preserve the filters from the original StackBlitz, as that was not part of the functionality in question.

Environment

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

[FredyValstrauss]

I'm facing this exact same issue with Angular 9 and Angular Material 9.1.0. Please help!

[dtarjeft]

@FredyValstrauss This component should work around the issue for the time being, though I trust the Angular team will be able to come up with a better solution.

[FredyValstrauss]

Hi @dtarjeft, your work aroud worked wonderful in my case. I only modified the template to use templateURL and use a separate html file, but it works just fine. As you said, this is a work around and Angular team should release a better and much simpler solution. Thanks again for the work around!