Ngx-translate and Table Sort

Question

Im using ngx-translate in my Angular app.

It works well but unfortunally I can't find a solution for translating a table column header keeping sort functionality.

This is my column definition

 <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header="name" > Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

I need to translate "Name" keeping sort property.

I've tried with simply:

<ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header="name" translate> generic.name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

But it print "generic.name".

If I remove:

mat-sort-header="name"

translation works but I lose the table sort functionality.

I've tried something like this:

  <ng-container matColumnDef="{{ 'generic.name' | translate }}">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header="{{ 'generic.name' | translate }}" translate> generic.name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>>

But it raise a lot of exception like: ERROR Error: Could not find column with id "name".

Thanks for any help.

Answer 1

If we need to translate only header, use translate pipe on label only.

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef  mat-sort-header="name" > 
    {{'Name' | translate}} 
  </th>
  <td mat-cell *matCellDef="let element"> 
    {{element.name}} 
  </td>
</ng-container>

Answer 2

I'm not very common with material and/or ngx-translate, but I think your last code snippet is correct except that you trying to traslate column id instead of text it should display. Try this:

<ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header="name">{{ 'generic.name' | translate }}</th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>