Angular ag-grid edit icon click get row data

grid setting the colDefs with multiple array of objects last being action where I’m displaying edit icon inside action button compoment

this.colDefs = [
    {
        headerName: 'ACTION',
        field: 'icon',
        cellRendererFramework: ActionButtonComponent,
        cellRendererParams: {
          prop1: this.rowData,
        },
        minWidth: 80,
        filter: false,
        maxWidth: 100,
        pinned: 'right',
      },
    ];
]

action.compoment.html (ActionButtonComponent)

<div><i aria-hidden="true" class="lmnicon lmnicon-edit" (click)="openDialog('update')"></i></div>

rowData is an array of object I’m passing and which are displaying in grid

[{
        "clientId": 1,
        "clientName": "DS",
        "configId": 164,
        "configKey": "ofmurl",
        "configValue": "<url>",
        "environment": "SIT",
        "resourceName": "ofm",
        "resourceid": 88
},
{
        "clientId": 1,
        "clientName": "DS",
        "configId": 165,
        "configKey": "url",
        "configValue": "",
        "environment": "UAT",
        "resourceName": "reports",
        "resourceid": 86
    },
    {
        "clientId": 1,
        "clientName": "DS",
        "configId": 166,
        "configKey": "url",
        "configValue": "",
        "environment": "UAT",
        "resourceName": "entitlement",
        "resourceid": 87
    },
]
   

How can I get particular row data object when I click on edit icon of that row

Answer

In ActionButtonComponent, you can use:

params: ICellRendererParams;
data;

agInit(params: ICellRendererParams): void {
    this.data = params.value;
}

<div><i aria-hidden="true" class="lmnicon lmnicon-edit" (click)="openDialog(data)"></i></div>