Pipes inside of Column Headings don't work

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior Whenever a column name’s associated value (for instance a class attribute in the component) changes, the column name doesn’t change.

Expected behavior The column name should change as well.

Reproduction of the problem (You don’t get a plunkr from me, since your template: http://plnkr.co/edit/TLx2vYlCTLsqcLwvWafd is broken and I cannot find ngx-datatable on unpkg).

<ngx-datatable class="material" [rows]="data" [headerHeight]="50"
               [footerHeight]="50" [rowHeight]="'auto'" [externalSorting]="true" [loadingIndicator]="loading"
               (sort)="onSort($event)">
    <ngx-datatable-column [name]="columnName" [flexGrow]="3">
        <template let-value="value" ngx-datatable-cell-template>
            {{value}}
        </template>
    </ngx-datatable-column>
</ngx-datatable>

<button (click)="toggleColumnName()">Toggle Column Name</button>

public loading: boolean = false;
public columnName: string = "ABC";

public data: Array<any> = [
    {
        firstColumn: "123"
    }
];

public onSort($event): void {
}

public toggleColumnName(): void {
    this.columnName = this.myAwesomeColumnName == "ABC" ? "DEF" : "ABC";
}

What is the motivation / use case for changing the behavior? I want to use ng2-translate’s TranslatePipe, but whenever the language changes, the corresponding column name doesn’t change. I know about https://github.com/swimlane/ngx-datatable/issues/376, but like I said: when the translation changes, the column doesn’t change.

• Table version: 6.0.0 (latest)

• Angular version: 2.0.x 2.4.5 (latest)

[sundriedtuna]

Is there a known workaround for this issue? I need to be able to use ng2-translate to change the language of the column headers dynamically.

Edit: Found a workaround. Pipes will only work correctly if they are within a header template. So, for example,

<ngx-datatable
                class="material"
                [rows]="rows"
                [columns]="columns"
                [columnMode]="'force'"
                [headerHeight]="25"
                [footerHeight]="36"
                [rowHeight]="36"
                [offset]="currentPage"
                [limit]="limit"
                (page)="onChange($event)">
            <ngx-datatable-column name="{{columns[0].name}}" prop="{{columns[0].prop}}">
                <template let-column="column" ngx-datatable-header-template>
                   {{'jsonKey1' | translate}}
                </template>
                <template let-value="value" ngx-datatable-cell-template>
                   {{value}}
                </template>
            </ngx-datatable-column>
</ngx-datatable>

[javico2609]

@sundriedtuna

i did trying that solution, it’s work fine for translate but lose the sort feature