Pipes inside of Column Headings don't work

[dhardtke]

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)

[Fonexn]

I have the same issue with ngx-datatable-column and ng2-translate.

 <ngx-datatable
    class="material"
    [rows]="rows"
    [loadingIndicator]="loadingIndicator"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [limit]="15">

    <ngx-datatable-column [name]="'NAME' | translate" prop="name" [width]="300"></ngx-datatable-column>

  </ngx-datatable>

Also I tried with

<ngx-datatable-column name="{{'NAME' | translate}}" prop="name" [width]="300"></ngx-datatable-column>

In both cases it does not work.

Table version: 6.0.0 (latest)

Angular version: 2.0.x 2.4.5 (latest)

[amcdnl]

@ocombe ^?

[dhardtke]

I doubt it is related to the concrete TranslatePipe.

I tried using a property of the component the ngx-datatable is embedded in as column name and change it when a button click occurs... still: no change. Once the variable is evaluated, the column name does not change anymore.

[collapsarzhang]

same issue here

[arnas47]

I have the same issue using ng2-translate pipe.

[stefmabo]

Is there any progress on this using ng2-translate pipe?

[Rocker93]

Having the same issue with ngx-translate 6 and ngx-datatable 6.3. Also, when loading the application on the page with ngx table, prop values are used instead of name, but when navigating to that page correct values are used.

[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>

[wiltonpolesca]

I've been using this way. configGridColumns(): void { this.gridColumns = [ { prop: 'id', name: '#' }, { prop: 'name', name: this.translate.instant('Name') } ]; } You only need to ensure that i18n file was loaded before use Instant's function

[Kurara]

@wiltonpolesca nice solution, the problem is that once it is loaded, you cannot change language :(

[javico2609]

@sundriedtuna

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

[monica7l]

@javico2609 you can add the sort to the template. Indeed it is an extra step to do:

<ngx-datatable-column [canAutoResize]="true" [flexGrow]="1" prop="year">
                    <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
                        <span (click)="sort()">{{ 'HOMEPAGE.YEAR' | translate }}</span>
                    </ng-template>
 </ngx-datatable-column>

[mirupal]

Just lost two hours for fixing by workarounds what should work out of the box.

Why is this still an issue 2 years later? Low priority? No developers? Architectural problem?

I really want to know.

[pierre-fromager]

Simply doing as below translate and keep sort working ;) <ngx-datatable-column prop="uid" name="{{ 'COMMON.CUSTOMER' | translate }} Id"></ngx-datatable-column>