Property 'columnApi' does not exist on type 'GridReadyEvent<any, any>' in Ag-Grid

In my Angular project, I just updated ag-grid-angular and ag-grid-community from version 30.2.0 to 32.0.1, and now it seems that GridReadyEvent is not a property of GridReadyEvent anymore!

  // Erorr: Property 'columnApi' does not exist on type 'GridReadyEvent<any, any>'.
  onGridReady({ columnApi, api }: GridReadyEvent): void {
    this.gridApi = api;
    this.gridColumnApi = columnApi;

    this.leads$
      .pipe(
        filter((data) => !!data),
        takeUntil(this.destroyed$)
      )
      .subscribe((data) => {
        const dataSource: IDatasource = {
          rowCount: null,
          getRows: ({ successCallback }) => successCallback(data, data.length),
        };

        api.setDatasource(dataSource); //Property 'setDatasource' does not exist on type 'GridApi<any>'.
      });
  }

Any idea why they removed it and what replaced it?

I found a Reference on how to migrate to the new version. Additionally, there is a dynamic way for migrating to the new version. You just need to run:

npx @ag-grid-devtools/cli@32.0 migrate --from=$FROM_VERSION

This will fix more than 50% changes that you need, however we also need some manual fix.

columnApi:

If you're already using columnApi replace it with GridApi:

ex: `columnApi.applyColumnState` should be `api.applyColumnState`

Some of the methods may change their name:

getAllColumns --> getColumns
getSecondaryColumns --> getPivotResultColumns

Full List is here.

GridApi:

Most of the Set methods like setDatasource, setTreeData and so one has been remove form this methods and they intoduced setGridOption to set properties:

api.setDatasource(dataSource); --> api.setGridOption('datasource', dataSource);