Dynamically changing Cell Renderer of ag-grid using param function in Angular 8

Issue

Can someone help me out with this? I'm using ag-Grid in Angular 8, where I have a column which has cell renderer as a single button (let's say Delete button), but when the grid fires cellValueChange Event i.e when a particular cell value change I want delete button cell renderer to get replaced with other cell renderers.

Here what I'm doing,

columnDefs: {

    headerName: 'Delete'
    cellRenderer: (params: ICellRendererParams) => {
        return getCellRenderer(params);
    }
}

getCellRenderer(params)
{
    if (params.value.isEdit)
        return 'updateRenderer';
    else
        return 'deleteRenderer';
}

isEdit is a hidden column in a grid whose value is set to 1 on event call, else by default it will be 0 for all rows.

So, this function should return the renderer. I have created frameworkComponent as below:

frameworkComponent: {
    deleteRenderer: DeleteRendererComponent,
    updateRenderer: UpdateRendererComponent
} 

Now, when I provide cellRenderer: 'deleteRenderer', I got a proper component rendered. But when I call it through function I only got string printed as deleteRenderer, not the component.

Thank in advance, any help will be appreciated.

Solution

I would suggest you combine both the cell renderers into one and decide the action based on the value of the field that you can pass as cellRenderer param.

Something like this -

cellRenderer: 'commonRenderer'
cellRendererParams: {
  editable : "isEdit" // pass the field value here
}

Inside your cell renderer component, you can access this editable param inside agInit like this -

agInit(params: any) : void {
    params.editable // here
}

Now you can branch off update/delete logic based on this passed parameter value.

Cell renderer component example

Answered By - Pratik Bhat