Is it possible to dynamically add ag-grid localisations?

Question

I am using the AgGridModule Angular wrapper of the ag-grid framework. My application is an Angular AOT application which handles localisation using the ngx-translate library (which dynamically loads translation data files on page load, for the currently selected language). This means that translations are only available asynchronously. As such I cannot just set the localeText property in gridOptions ( as recommended ) since I don't have the texts before generating the grid.

Does anyone know how to handle this scenario? Ideally I would just assign an RxJS Observable to the localeText property, which would send the appropriate texts object when ready, but this does not seem to work currently.

Answer 1

This can be done by providing your own localeTextFunc . That function takes the key from the grid and uses a translate function (ngx-translate in our case) outside of the grid for doing the translation. If no match is found, then the default value should be returned (which is the English value for the grid, the grids default language).

this.gridOptions = {
  localeTextFunc: (key: string, defaultValue: string) => {
    // look the value up. using the ngx translate service
    const data = this.translate.instant(key);
    return data === key ? defaultValue : data;
  }
};

Inject TranslateService as translate from '@ngx-translate/core' to use the synchronous translate.instant() method. But make sure the translations have been loaded before calling instant mthod.