I am using ag-grid-angular in my Angular project. My app component hold my main data model (rowData), and two sub components grid and grid-details. The grid component has an @Input to bind to rowData, and holds the ag-grid-angular component which rowData is also bound to. The grid-detail component also has an @Input to bind to the model and has a form in which rowData can be changed.
I have abstracted the application in a StackBlitz
When I change data in ag-grid-angular I can see the change in rowData in app and grid-details, implying correctly bound properties across the components. When I change rowData in grid-details, I can see the change in app but the data presentation in ag-grid-angular is not updated. When call on gridApi to redraw the rows, the data is correctly presented (implying that the data was also correctly bound as I didn't need to set the row data again in gridApi).
ag-grid-angular not refresh automatically?gridApi.redrawRows()? I have multiple components in my actual implementation and would like some kind of catch all onChange rather than implement some @Output event emitter for each subcomponent.What I have tried: I tried to implement a call to gridApi.redrawRows() via Angular's OnChanges, but I realise that OnChanges lifecycle hook is not called on value changes within the instance of rowData. So in my situation OnChanges does not get called when I change data in grid-details.
This sounds like normal Angular change detection behavior.
Presumably, your rowData variable is an array, and your are updating an item in the array.
However, for change detection to fire, you need to replace the instance of the array. So you could, for instance do something like
this.rowData = [...this.rowData]