CODEWITHSUNDEEP
angularag-gridag-grid-angular
Code_Vishal
Code_Vishal

Reputation: 127

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

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
   }

Upvotes: 1

Views: 23716

Answers (1)

Bal Krishna Jha
Bal Krishna Jha

Reputation: 7226

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>

Upvotes: 1

Related Questions