Property 'getFrameworkComponentInstance' does not exist on type 'ICellRendererComp'

Question

I'm trying to get the instance of cell renderer (Angular component) on rowSelected event handler:

onRowSelected($event) {
    var selectedRow = this.gridApi.getDisplayedRowAtIndex($event.rowIndex);
    var params = { columns: ['added'], rowNodes: [selectedRow]};
    var instances = this.gridApi.getCellRendererInstances(params);
    if (instances.length > 0) {
        var wrapperInstance = instances[0].getFrameworkComponentInstance();
    }
}

Unfortunately I get the error during the compilation of angular application (ts):

Property 'getFrameworkComponentInstance' does not exist on type 'ICellRendererComp'

The implementation comes from official documentation at https://www.ag-grid.com/javascript-grid-cell-rendering-components/ (find Accessing Cell Renderer Instances).

Here is possible factory method which define public getFrameworkComponentInstance.

It's unexpected situation because when I debug this method I can get the renderer with method getFrameworkComponentInstance on instances[0].

Answer 1

From what I saw in the interfaces of the ICellRenderer, the interface ICellRendererComp doesn't have the function getFrameworkComponentInstance.

I've worked a lot with ag-grid-angular and I found out that sometimes, the interfaces are not relevant to what's really in the object (Missing functions/variables).

The problem is mainly because of tslint that doesn't trust the method since it isn't in the interface. To fix that, I created my own custom interface that extends the ICellRendererComp but with the function.

That way when you try to call your instance you can cast it to your interface. I tried a lot of things and only this worked for me.

Answer 2

I agree with the reasons in the above answer, however a shorter approach has saved me time.
Instead of creating a custom interface, the following has worked for me -

if (instances.length > 0) {
        var cellRenderer: any = instances[0];
        var wrapperInstance = cellRenderer.getFrameworkComponentInstance();
    }

Answer 3

From v27 of AG Grid

You no longer need to use the method getFrameworkComponentInstance(), as your Angular component will be returned directly from getCellRendererInstances(). So you can loop through the components and call their methods directly.

const instances = this.gridApi.getCellRendererInstances(params) as MyComponent[];

instances.forEach((instance) => {
  instance.myComponentFunction();
});

See updated documentation here: Component Cell Renderer