ag-grid API Undefined in Angular 2

I am using the ag-grid API in an Angular 2 app, inside the ngOnInit method.

In the onGridReady event like mentioned in this post, the API is accessible and things work fine.

However, I need to call the API in one of the following methods as well:

• onRowDataChanged


• onNewColumnsLoaded


• onModelUpdated

This is not working because the API is undefined. In addition, for some reason I can also call the API in the onCellDoubleClicked and onCellClicked events.

This seem to be a bug. Does anyone know what is going on?

Please see the code bellow:

ngOnInit() {

    this.gridOptions = {

        onGridReady: function (param) {
            param.api.sizeColumnsToFit(); // works fine
        },

        onCellDoubleClicked: function (param) {
            param.api.sizeColumnsToFit(); // works fine
        },

        onRowDataChanged: function (param) {
            param.api.sizeColumnsToFit(); // API is undefined
        },
    };
}

Answer

Alright, here is how I got it working.

• First, capture the this reference for your angular component just to make sure that you will not have JavaScript scoping issues.




• Then, capture the API reference when it is available inside the onGridReady event




• Lastly, only call the API after the stack is empty, deferring all the API calls with the setTimeout function

So now the code looks more or less like this:

...
let self = this;
...
onGridReady: function (param) {
    self.api = param.api;
},

onRowDataChanged: function (param) {
    setTimeout(() => {
        self.api.sizeColumnsToFit()
        ...more API calls...
    }, 0);
},
...