Ag-Grid cellRender with Button Click

Question

I am using an angular 5 with ag-grid data table i cant able to trigger a click event from cell using cellRenderer here how am using my ag-grid --> colDefs

this.columnDefs = [
            {headerName: '#', rowDrag: true, width: 75},
            {headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="drop()">Click</button></div>'
                }
            }
];

drop() {
    alert("BUTTON CLICKEFD")
}

if am using onClick="alert("123")" --> it works, but i cant able to use onClick="drop()" it throws drop of undefined,

i tried this too inside of cellRenderer --> params = params.$scope.drop = this.drop;

if am using gridOptions with angularCompileRows : true it throws an error Cannot read property '$apply' of undefined. Do i need to install ag-grid enterprise ??

Answer 1

You can use cellRenderer with a button component. If you want to get the click event on the button from the user on the table, just declare the callback function you want to cellRendererParams.

// app.component.ts
columnDefs = [
{
  headerName: 'Button Col 1',
  cellRenderer: 'buttonRenderer',
  cellRendererParams: {
    onClick: this.onBtnClick.bind(this),
    label: 'Click'
  }
},
...
]

The above code is just a small part, check out full example on Stackblitz