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.
data-table
like addons – CapitanFindus