在ag-grid中在onCellValueChanged上设置单元格样式时出现问题

Question

I am trying to style a cell with a particular background color if the 'oldValue' and 'newValue' are not equal in the 'onCellValueChanged' handler.

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onCellValueChanged: function(params) {
      if(params.oldValue !== params.newValue) {
        params.colDef.cellStyle = function(params) {
        return { backgroundColor: 'green'}; 
      }
    }
  }
 };

When I am editing the cell value to a new value, I don't see the style change being applied on tabbing out or clicking any other cell. Rather, I have to click back on the edited cell again and click outside after that to see the style being applied. I am not sure what is happening, can someone guide me here. I am also adding the demo

Answer 1

Bind it to your template

<ag-grid-angular  (cellValueChanged)="onCellValueChanged($event)">
</ag-grid-angular>