AG-Grid Angular: Issues with Language Change, Theme Switching, and Data Refresh Outside...

Now, when users change the language of the app, I need to destroy the current grid, after saving the applied filters of the actual grid by the user, and then create a new grid. However, this process:

1. prevents the "light-dark theme" from applying if I am not in the ag-grid component;
2. prevents the language from applying to the ag-grid if the user changes the language of the app outside of the ag-grid component;
3. causes the language to change correctly when I change the language of the app inside the ag-grid component, but the cases are not showing correctly according to the checkbox button that I have.

cases.html


cases.html
<div class="form-check form-switch mt-1">
<input
[(ngModel)]="collaborator"
(ngModelChange)="onCollaboratorChange()"
type="checkbox"
class="form-check-input"
id="customSwitch2"
/>
<label class="form-check-label" for="customSwitch2"
>Collaborator cases</label
>
</div>
<ag-grid-angular
style="width: 100%; height: 500px"
[class]="gridTheme"
[rowData]="rowData"
[columnDefs]="colDefs"
[gridOptions]="gridOptions"
[defaultColDef]="defaultColDef"
(gridReady)="onGridReady($event)"
></ag-grid-angular>

cases.ts


export class CasesComponent implements OnInit, OnDestroy {
public rowData: Case[] = [];

public collaborator = false;

public gridTheme = 'ag-theme-material';

private observer: MutationObserver | null = null;

private gridApi: GridApi | null = null;

private langSubscription: Subscription | null = null;

private savedFilterModel: any = null;

@ViewChild(AgGridAngular, { static: false, read: ElementRef })
gridElement!: ElementRef;

public defaultColDef: ColDef = {
resizable: true,
};

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

caseColumnConfig: ColDef[] = [
{ field: 'anagram', headerName: 'Anagrama' },
{ field: 'nif', headerName: 'NIF' },
];

public colDefs: ColDef[] = this.caseColumnConfig.map(
({ field, headerName, valueGetter }) => ({
field,
headerName,
sortable: true,
filter: true,
flex: 1,
...(valueGetter && { valueGetter }),
})
);

constructor(
private caseService: CaseApiService,
private spinner: NgxSpinnerService,
private languageService: LanguageService
) {}

ngOnInit() {
this.loadData();
this.updateGridTheme();
this.observeThemeChanges();
this.langSubscription =
this.languageService.translate.onLangChange.subscribe(() => {
this.updateGridLocale();
});
this.updateGridLocale();
}

ngOnDestroy() {
if (this.observer) {
this.observer.disconnect();
}
if (this.langSubscription) {
this.langSubscription.unsubscribe();
}
if (this.gridApi) {
this.saveFilterModel();
this.gridApi.destroy();
}
}

onGridReady(params: GridReadyEvent) {
this.gridApi = params.api;
if (this.savedFilterModel) {
this.gridApi.setFilterModel(this.savedFilterModel);
}
}

private saveFilterModel() {
if (this.gridApi) {
this.savedFilterModel = this.gridApi.getFilterModel();
}
}

private updateGridLocale() {
const currentLang = this.languageService
.getCurrentLanguage()
.toLowerCase();

let newLocale: any;
switch (currentLang) {
case 'es':
newLocale = AG_GRID_LOCALE_ES;
break;
case 'en':
newLocale = AG_GRID_LOCALE_EN;
break;
case 'eu':
newLocale = AG_GRID_LOCALE_EU;
break;
default:
newLocale = AG_GRID_LOCALE_EN;
}

if (this.gridApi && this.gridElement) {
this.saveFilterModel();
this.gridOptions.localeText = newLocale;
this.gridApi.destroy();
this.gridApi = createGrid(this.gridElement.nativeElement, {
...this.gridOptions,
columnDefs: this.colDefs,
rowData: this.rowData,
defaultColDef: this.defaultColDef,
});
if (this.savedFilterModel) {
this.gridApi.setFilterModel(this.savedFilterModel);
}
}
}

private loadData() {
this.spinner.show();
this.caseService.getAllCases(this.collaborator).subscribe({
next: (cases: Case[]) => {
this.rowData = cases;
this.spinner.hide();
},
error: error => {
this.spinner.hide();
console.error('Error fetching cases:', error);
},
});
}

onCollaboratorChange() {
this.loadData();
}

updateGridTheme() {
const theme = document.documentElement.getAttribute('data-bs-theme');
this.gridTheme =
theme === 'dark' ? 'ag-theme-quartz-dark' : 'ag-theme-quartz';
console.log('Ag-grid theme: ', this.gridTheme);
}

private observeThemeChanges() {
this.observer = new MutationObserver(() => {
this.updateGridTheme();
});

this.observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-bs-theme'],
});
}
}


languageService.ts (gives current language of app)



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

Continue reading...