How to launch a method after a cell value has been edited in ag-grid?

Question

I have this simple column:

Here's its definition:

{
      headerName: "Activité",
      field: "activite",
      editable: true,
       , cellClass: "cell-wrap-text"
      }  

Here's the method I want to launch every time the user enters a new input in that column.

  public UpdateActValue() {
      this.data.sendActToBia(this.params.data.activite);
      }  

Here are my questions:
1/ Are there any ag-grid "native" way to launch a particular method after a cell value from a column has been edited?
2/ Should I simply define a custom cell renderer and do all the necessary work there?
Thank you!

Answer 1

You can make use of the cellValueChanged event binding to detect changes in cell value.

On your component.html, you can simply bind the onCellValueChanged() method to the cellValueChanged event.

<ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(cellValueChanged)="onCellValueChanged($event)"
>

And on your component.ts, you will define the onCellValueChanged() method, which will be fired every single time any cell value has changed.

onCellValueChanged(event) {
  // handle the rest here
}

You may read up more about grid cell editing and change detection over here.

Answer 2

I have just found a simple way to do this. I hope it helps.

In grid.component.html:

Add this inside the grid definition:

  (cellValueChanged)="onCellValueChanged($event)"

In the grid.component.ts: Define the method:

onCellValueChanged(params) {
    const colId = params.column.getId();
    if (colId === "activite") {
      this.data.sendActToBia(params.data.activite);
}
  }