Angular Material Table - How to update column header of an existing table?

Question

I'm using Angular 7 and I have a simple component with an Angular Material Table. Through some event, say a mouse click, I want to be able to update both the data and the header of that existing table.

Before:

After (goal):

Currently, I'm getting the data to update fine. However, I can't get the header text of the columns to update unless, that is, I do a fairly hokey window timeout call.

This is hard to describe, so a stackblitz repo should help. The in 'table-dynamic-columns.example.ts' file I've linked there, I have two different strategies that I try on the 'changeColumnHeader' button click handler. It appears that in order to get my new column header title to show up, I need to first clear out the displayed columns of the table, and then set them back properly in a timeout. Maybe it's not working because the property name stays the same (i.e. 'id') and only the title changes.

Does anyone know a better way to get this to update correctly?

Answer 1

Maybe it's not working because the property name stays the same (i.e. 'id') and only the title changes.

Thats the reason for it not updating, as explained on this comment

On the same comment, there is a proposed solution that you may use (add a trackBy function).

For doing this, include trackBy on your template:

<ng-container [matColumnDef]="config.property" *ngFor="let config of configs; trackBy: trackByIndex">
<th mat-header-cell *matHeaderCellDef> {{config.name}} </th>
<td mat-cell *matCellDef="let element"> {{element[config.property]}} </td>

Include function trackByIndex on your component ts file:

trackByIndex(i) { return i; }

Forked the stackblitz you provided and it is working here