How to change dynamically the Language of ag-grid without flickering?

I have implemented gridOptions in my AG-GRID and included localeText: AG_GRID_LOCALE_ES, so the AG-GRID table starts in Spanish. Now, I need to implement a dynamic change to this language depending on the application language. How can I do this? I have tried some options, but they cause flickering issues.

I have tried to implement #myGrid in my ag-grid template in HTML, and make a ViewPort to refresh the entire grid of the template. This makes correct language switching but made flickering while switching into languages. This is my code removing that changes:

Ts code


public gridOptions = {
localeText: AG_GRID_LOCALE_ES,
pagination: true,
paginationPageSize: 50,
paginationPageSizeSelector: [50, 100, 200],
animateRows: true,
};

Html code


<ag-grid-angular
style="width: 100%; height: 500px"
[class]="gridTheme"
[rowData]="rowData"
[columnDefs]="colDefs"
[gridOptions]="gridOptions"
[defaultColDef]="defaultColDef"
></ag-grid-angular>

LanguageService (gives ES or EN)


getCurrentLanguage(): string {
return this.translate.currentLang || this.defaultLang;
}

Continue reading...