Delete button ag-grid angular2

Question

I'm trying to add a delete button for a list of elements in a ag-grid table.

I created a component for the button and I'm able to remove the row with

...

export class AgGridButtonDeleteComponent implements ICellRendererAngularComp

...

deleteFunc(){
    this.params.api.selectIndex(this.params.node.rowIndex);
    var selectedData = this.params.api.getSelectedRows();
    this.params.api.updateRowData({remove: selectedData});

...

but i also need to call a service to actually remove the data so i tried to include the service in the button component

this.myService.deleteRow(this.value).subscribe(
response => {
    if(response){
        this.params.api.selectIndex(this.params.node.rowIndex);
        var selectedData = this.params.api.getSelectedRows();
        this.params.api.updateRowData({remove: selectedData}); 
    }
}

);

but i get this error: Property 'deleteButtonRenderer' is incompatible with index signature. Type 'typeof AgGridButtonDeleteComponent' is not comparable to type 'new () => any'.

any suggestions on how can i do that? I'm using ag-grid 16.0.0 and angular 6, all examples i've found are for angular 1

thank you

score 2 · Answer 1 · answered Apr 30 '18 at 15:47

A possible solution is:

in the column def add

onCellClicked: function (params) {
 this.deleteRow(params.data.Id)
 params.api.selectIndex(params.node.rowIndex);
 var selectedData = params.api.getSelectedRows();
 params.api.updateRowData({remove: selectedData}); 
}.bind(this)

remember to bind(this) otherwise the deleteRow function is not visible

Delete button ag-grid angular2

1 Answers1