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!

Solution 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.

Solution 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);
}
  }

Comments

[Ahmed Ghrib]

Thanks, I have just posted a complete answer. Just like yours but with a minor detail of detecting which column has been affected by the change. Thank you!

[Ahmed Ghrib]

Btw, do you have any idea how I can detect in which the row the change happened? Just like I detected in which column?

[wentjun]

@AhmedGhrib Yes, you can use cellValueChanged for that purpose too. On the very same method, you can detect the index of the changed row by doing event.rowIndex.

[Ahmed Ghrib]

I have found a simple way: params.node.id with the same event listener. Thank you again