ag-grid in a Material Tab

Question

I have an app that has two ag-grids in two tabs using Angular Material tabs. When the user switches between tabs the items in one of the columns get rendered outside of the grid (but inside the tab body). The difference in the column is that it uses a custom cell renderer. It only effects the grid in the first tab because that is the grid that uses the cell renderer. So you have to switch to the second tab then back to the first tab to see it.

Stackblitz example here

It's hard to see because the column elements get rendered at the bottom of the tab window, you can barely see them poking out at the bottom of the grid. Also, if you page to the next page of the grid they are rendered properly, even on the first page when you page back.

I've tried executing gridApi.refreshCells() after the tab has switched but it doesn't do anything.

Answer 1

The fix turned out to be simple and I hope this is the best method for doing so. I simply execute the grid API's redrawRows method.