Dynamic theme change on Angular ag-grid with infinite scroll

Question

I have an Ag-grid in my Angular 9 application with infinite scroll working properly and I want to implement a theme chooser like the one in the demo.

However, simply changing the CSS class is not enough to change the theme, because row heights are not being updated upon theme change.

I tried calling refreshCells and resetRowHeights after changing the theme, but neither updates the row heights.

The source code of the demo seems to destroy and recreate the grid upon theme change, and this GitHub issue seems to confirm that the best way to change the theme dynamically is to destroy the grid and recreate it.

However, I haven't been able to find a way to recreate the grid after calling gridApi.destroy().

Is there a way to do so?

Answer 1

I found myself an answer in this plunkr:

To destroy and recreate the grid, it needs to be in a container element with *ngIf, so that it can be removed and recreated dynamically: for instance, if the container element is

<div *ngIf="gridActive">
    <ag-grid ....>
</div>

Then in the component code the theme change can be done by doing:

recreateGrid() {
    this.gridActive = false;
    setTimeout(() => {
      this.gridActive = true;
    });
}