Table with dynamic columns - footer / header does not update after context change

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I define table using dynamic columns like below. In footer cell definition I am using some context object (from current component) and its values.

After context object is updated, table footer displays current data.

        <ng-container
            *ngFor="let month of months;"
            matColumnDef="p{{month}}"
        >
            <th mat-header-cell *matHeaderCellDef>
                {{month}}
            </th>
            <td
                mat-cell
                *matCellDef="let element"
            >
                        {{element.someValue}}
            </td>
            <td mat-footer-cell *matFooterCellDef>
                   {{someContextObject?.someValue}}
            </td>
        </ng-container>

What is the current behavior?

After updating context object, table footer does not show changes. It does not work even, if context variable is a simple string.

This works correctly, if table cell is not defined using *ngFor.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material 6.4.7

[danielsharvey]

Further to the issues noted by @literalpie above, I have more workarounds for those interested.

Having noted the ‘changed’ flags as part of removeHeaderRowDef() and removeFooterRowDef() https://github.com/angular/material2/blob/21e646a3e7d99323e3f6d1e2961f416c8695bf48/src/cdk/table/table.ts#L555 https://github.com/angular/material2/blob/21e646a3e7d99323e3f6d1e2961f416c8695bf48/src/cdk/table/table.ts#L567

here are some change detection workarounds for header/footer rows:

• header rows cannot be ngIfd --> use table.removeHeaderRowDef(null) to trigger an update to the header (or table.removeFooterRowDef(null))

See updated stackblitz - note that toggling booly refreshes table header and body rows correctly.

[TiS]

Update - I have been able to make a work around for this using separate ng-template (outside of ng-container), like below. But this is absurd, especially for footer cells, which often show aggregate values (totals) from outside of table data source.

<ng-container
            *ngFor="let month of months;"
            matColumnDef="p{{month}}"
        >
            <th mat-header-cell *matHeaderCellDef>
                {{month}}
            </th>
            <td
                mat-cell
                *matCellDef="let element"
            >
                        {{element.someValue}}
            </td>
            <td mat-footer-cell *matFooterCellDef>
                   <ng-container *ngTemplateOutlet="monthFooter;context: {month: month}"></ng-container>
            </td>
</ng-container>

 <ng-template #monthFooter let-month="month">
                {{someContextObject?.someValue}}
 </ng-template>