How to detect change in ag-grid when my row data is updated while passing from one component to other

Question

I am working on a Project which is on angular6 & we are implementing ag-grid to populate the data from angular dialog box. Since Multiple teams are working so they are creating there own component .I am stuck at One of the unusual situation and I am not able to figure out how to resolve the situation . We have a button called (ADD OWNER) which is a component called ADD-OWNER.component.ts where I am opening a dialog box and passing another component called ownerdetails.component.ts which have my all form details. There are 2 buttons (ADD/CANCEL) over dialog box so that I am pushing data into a metadata service as I don't have to save in database ,I have to keep the data over browser. That Part of coding I did in dialog.closed event which is working fine .Now I have to pass this ownerdetails into another component called Gridcomponent where my ag-grid is so I have used input property event to send data from my add-owner.component to grid component. I am rendering grid component selector into my add-onwer.component.ts by passing input details like given. Now I am using input property in my grid to receive the value but I want grid to be updated automatically when there is a change in rowdata. The value is not updated ,how do I achieve that. I could see values are getting pushed into ownerlist but somehow I have to show in grid. I don't have the exact code but I tried my best TO explain .

ADD-OWNER.Component.html

<button mat-button (click)="openDialog()">Open dialog</button>
      <app-grid-selector [gridOptions]="ownerlist ">

ADD-OWNER.Component.ts

  openDialog() {
    const dialogRef = this.dialog.open(OwnerDetails);

    dialogRef.afterClosed().subscribe(result => {
      ownerlist = Pushing data into a metadata service which is working fine
    });}

grid.component.html

    <ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="owner" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

`grid.component.ts`

 @Input() gridoptions
   ngOnint(){
   owner =this.gridOptions.rowData
   }

@PratikBhat ,I am not subscribing ,i am pushing owner details into metdata service (dialog closed) as I mentioned which I am passing into ag-grid .I have a gridready event which I thiink initiliaze when grid is ready .How to use api.refreshCells ,can you help me ,I don't need any extra button click or any handler .I want details to come automatically when there is a change in rowData — Sarvesh Gupta
The thing is Pratik where do I put this code api.refreshCells(cellRefreshParams) inside your subscribe? or gridApi.setRowData(ownerList.rowData) .I cant put on ngOninit since my grid is already been initiliazed first time and it wont hit again & I dont want any other button or click handler to set new value.I want grid to figure out automatically there was a change in rowData — Sarvesh Gupta
Basically you would want your metadata service to return observable to which your ag-grid component would subscribe to; and subsequently use the refresh code . Based on how your project is structured, I would recommend using redux (ngrx/store or angular-redux) to manage state — Pratik Bhat
@PratikBhat ,pratik ,the thing is that only ,I have 2 different components -ADD-OWner and gridcomponet ,if it was a single component ,i can do what you are saying in subscribe but I have to do the same thing in Grid component without any handler or button — Sarvesh Gupta

Bal Krishna Jha Bal Krishna Jha · Accepted Answer · 2020-05-27T10:29:54

As of ag-grid version `^22.1.1 you can use

In component:

onRowDataUpdated as

gridOptions = {
    onRowDataUpdated: function(){//do something}
}

Use gridOptions in template as

 <ag-grid-angular
     ...
     [gridOptions]="gridOptions"
     ...
  >
  </ag-grid-angular>