How to reinitialize ag-grid on any event?

Question

I have created an ag-grid component by clicking of the button I want to set enableRtl property to true.

In brief, I have added one component let's say -

<ag-grid-angular #agGrid [floatingFilter]="true" 
      [enableRtl]="isArabic" (gridReady)="onGridReady($event)" 
      [(enableRtl)]="enableRtl" 
      [rowSelection]="rowSelection"
      [defaultColDef]="columnConfig" [rowData]="data" 
      [columnDefs]="columns"                   
      [gridOptions]="gridOptions"
></ag-grid-angular>

Now I want to change the enableRtl based on the click event.

Here, enableRtl is a public variable for the component.

But, it is not reflecting the RTL.

I have added the scenario at Stackblitz -

https://stackblitz.com/edit/angular-ag-grid-col-span-and-col-group-tsso85

Answer 1

There is a way you can achieve this.

Have a flag for ngIf at the ag-grid-angular element level, and conditionally toggle it inside your event handler.

<ag-grid-angular *ngIf="showGrid"
     class="ag-theme-material"
     [rowData]="rowData"
     [columnDefs]="columnDefs | async"
     [gridOptions]="gridOptions"
     [enableRtl]="lang"
>
</ag-grid-angular>

This way, the grid will be reinitialised with the updated flag.

Keep in mind that there is a performance cost involved here as the grid is being reinitialised. It's upto you if you think the impact is negligible, this is the solution for you.

Have a look at the updated Stackblitz: ag-grid : RTL <-> LTR

Answer 2

It would require to reload gridOptions, atm ag-grid doesn't provide the possibility to reload key settings dynamically, more details here