Search code examples
angularag-gridngx-translate

How to translate ag grid header using ngx-translate

I have an AG-GRID in my application, and I need to translate the header. I tried this solution but it didn't work, it's sad there is no method such refreshHeader()

I was wonderwing how to tranlsate header from ag grid

HTML

 <ag-grid-angular #grid class="ag-theme-alpine" [rowData]="dataSource"
                       rowSelection=single domLayout=autoHeight [pagination]="true"
                       [context]="context" [paginationPageSize]=15 
                       [columnDefs]="columns" 
                       [defaultColDef]="defaultColumnDef">
      </ag-grid-angular>

TS

constructor(private translationService: TranslationService) {}
@ViewChild('grid') dataGrid?: AgGridAngular;
this.columns = [
      { headerName: 'teste', field:'type', sortable: true },
      { headerName: 'idtca'.toUpperCase(), field: 'idtca', sortable: true},
      { headerName: 'Raison', field: 'raison', sortable: true},
   
    ];
Solution

  • Try this...

    this.columns = [
    { headerValueGetter: this.headerTranslation('teste'), field:'type', sortable: true },
    { headerValueGetter: this.headerTranslation('Raison'), field: 'raison', sortable: true},
];

    Then

    headerTranslation(translateKey: string) {
  return () => this.translate.instant(translateKey);
}

    You will need translation keys 'teste', 'Raison' and so on in your set of translations, but that is done in the standard ngx-translate way.