Translate headerName with ngx-translate (angular)

[saidoze]

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of ag-Grid'
[] support request => see 'Requesting Community Support'

Providing a Reproducible Scenario
We are using Angular to visualise an AG grid. We want the headers of the ag grid to be translated in the language of the user.

Ag grid code:
<ag-grid-angular class="ag-theme-material" [rowData]="productionOrders"> <ag-grid-column [headerName]="'ORDERS.GRID.EntryCode' | translate" field="entry"></ag-grid-column> <ag-grid-column [headerName]="ORDERS.GRID.EntryDescription" field="entryDescription"></ag-grid-column> </ag-grid-angular>

The same way we can translate a value on our html page itself
<span>{{ 'ORDERS.Status' | translate}}</span>

I noticed, when the translations are being loaded, ag grid does not notice when the translations are loaded. The value on the html page itself however gets translated.

Extra info: The translate pipe of ngx-translate is an "impure" pipe, which means its value can change (eg. when all translations are loaded)

//EDIT
The same way, when using a headerName without a translation, it does not get updated:
Ag grid code: <ag-grid-angular class="ag-theme-material" [rowData]="productionOrders"> <ag-grid-column [headerName]="bindedString" field="entry"></ag-grid-column> </ag-grid-angular> Typescript: this.lazyString = 'test-1'; setTimeout(() => { this.lazyString = 'test-2'; }, 3000);

Current behavior
The header name does not gets translated

Expected behavior
I expect the header name to be the translated value

Environment:
Angular 6.1.9

• ag-Grid version: 19.0.0

• Browser:
  Chrome 69.0.3497.100

• Language: Typescript

[makinggoodsoftware]

Hi,

ag-grid has its own buil-in i18n feature

https://www.ag-grid.com/javascript-grid-internationalisation/

ag-grid is built so that it can integrate with any technology, this means that in theory, it shouldn't matter what backend you are using or even which framework, as we cover the most popular ones.

In our docs, we have examples that show ag-grid working with the different frameworks, but we don't cover the integration of ag-grid with particular backends or data sources.

The reason for this is purely to do with how complicated it would be to do so.

All of our examples that require a data source are written so that they can be easily adapted to your own convenience.

We do however have some examples that show some particularly popular approaches

Rxjs: https://www.ag-grid.com/example-angular-rxjs/

Redux: https://www.ag-grid.com/react-redux-integration-pt1/ or https://ag-grid.zendesk.com/hc/en-us/articles/360007240511-Infinite-Row-Model-with-Redux-store-example

Java & Oracle: https://www.ag-grid.com/oracle-server-side-operations/

Java & Spark: https://www.ag-grid.com/spark-server-side-operations/

Observables: https://ag-grid.zendesk.com/hc/en-us/articles/360016220591-Infinite-row-model-using-an-observable-as-a-data-source

How to do CRUD given a datasource interface: https://ag-grid.zendesk.com/hc/en-us/articles/360005170271-How-to-use-a-real-URL-Endpoint

Note that you are expected to come up with your implementation to connect ag-grid to your own particular backend/data source, but you can always contact us for help if you need support for any specific question that arises from your implementation

[jochenjonc]

I'm having the same issue and the solution proposed here are all examples of updating the row data. But the question is how to update rowheaders with for example Angular pipes or rxjs?