Translating ag-Grid

ag Grid

Being the first time I used ag-Grid in an Angular project, I supposed that translation (localisation) would be really easy because ag-Grid is so popular.

Well, I’m writing this tutorial because it is not. After 2 hours searching how to do that, I found 3 different “stack overflows” that explain different parts of the process but asking to specific users questions.

I put it altogether and it worked, so I want to share this for futures “me” wasting their time.

In fact, it is easy… once you know what to do exactly.

The oficial doc is really poor:

ag-Grid

What they want to say there is:

1. You need to translate manually all the localeText file, there is no repository where you can find other languages (I have mine translated to spanish, will share it at the end).
2. Now you have two alternatives to use it in Angular: using TranslateService from your provider (in my case I’m using ngx-translate) or use an specific file for translate only the Grid. I recommend the second, because has no caveats at all.
3. Use the function localeTextFunc to translate the Grid.

Let’s go:

Point 1: translate file

The most effective way is to create a simple .js file copying the localeText file provided in docs and export the values:

export const localeEs = {
  selectAll: 'Seleccionar todo',
  selectAllSearchResults: 'Seleccionar todos los resultados',
  searchOoo: 'Buscar...',
  blanks: 'Vacíos',
  noMatches: 'Sin coincidencias',
  filterOoo: 'Filtro...',
  equals: 'Igual',
  notEqual: 'Diferente',
...
}

Save it to assets, for example: assets/locale.es.js

Point 2 & 3: import the file and translate

In your grid component, you need to import the translation

import { localeEs } from '../../assets/locale.es';

Also, and I lost one hour of the two searching this simple information because official documentation talks a lot in the section of gridOptions but shows few examples in Angular, configure the gridOptions to link with the Grid between component and HTML:

In template:

<ag-grid-angular
  style="width: auto; height: 800px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
></ag-grid-angular>

In component:

export class GridListComponent implements OnInit {
  private columnDefs = [];
  private rowData: [];
  // Special properties here, like localization
  private gridOptions = {};
onInit(): void {
  this.gridOptions = {
    localeTextFunc: (key: string, defaultValue: string) =>  localeEs[key] || defaultValue
  }
}

The function localeTextFunc takes care automatically of searching for a key (a text in the Grid). We simply get the same key in our translation file with the localeEs[key] and all is done.

We can do the same with ngx-translate:

localeTextFunc: (key: string, defaultValue: string) => {
    const data = this.translate.instant(key);
    return data === key ? defaultValue : data;
}

But as I said, seems better to me separate Grid translation from App translation (and don’t get possible problems with ngx-translate).

Only if you need to have multiple languages support, ngx-translate is easier (it’s automatic), but you need to configure it to load at start of angular App in order to use .instant function (instead of .get) (see how below)

Configuring ngx-translate to load at startup in Angular

Here is the spanish translation file for ag Grid:

https://gist.github.com/mcvendrell/42d3f9b69a9b862b26547c7ef4027a84