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)
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>
this.lazyString = 'test-1';
setTimeout(() => {
this.lazyString = 'test-2';
}, 3000);
The header name is never updated to "test-2"