How to write click event in inside of cellrenderer angular ag grid

Question

enter code hereI am trying to create edit and delete buttons in same column for every row using angular ag grid. To display the edit and delete buttons, I am using icons. I am able to display the remove and edit icons for every row in ag grid, but i am failing to click those icons. Below are the respective images of that. I tried to click event inside of button but it was not worked, I tried to write click event in icon tag also but it is also not worked. Below is my code which i am using

Answer 1

You can follow this approach to create a click event in cell renderer.

First : Create Button Cell

create button cell renderer as an Angular component that implements the ICellRendererAngularComp interface as follows :

@Component({
  selector: 'btn-cell-renderer',
  template: `
    <button (click)="handleClickEvent($event)">Click me</button>
  `,
})
export class BtnCellRenderer implements ICellRendererAngularComp
{
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }

  handleClickEvent() {
    this.params.clicked(this.params.value);
  } 
 
}

The params object is accessed through the agInit hook.

Second: Register the BtnRenderer in the app module

// app/app.modules.ts

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([BtnCellRenderer]),
  ],
  declarations: [AppComponent, BtnCellRenderer],
  bootstrap: [AppComponent],
})

Third: Use the renderer Use the renderer in your component as follows

// app/app.component.ts

this.columnDefs = [
      {
        field: 'action',
        cellRenderer: 'btnCellRenderer',
        cellRendererParams: {
          clicked: function(field: any) {
            alert(`${field} was clicked`);
          }
        },
        minWidth: 100,
      }
     
      ];
      
      this.frameworkComponents = {
      btnCellRenderer: BtnCellRenderer
    };

Answer 2

You can follow kplus answer and in order to display two buttons create two renderer and bind them separately with edit and delete button in your columnDefs.

  columnDefs = [
  {
      field: 'edit', cellRenderer: 'editRenderer',
      headerClass: 'my-header-class',
      cellRendererParams: {
        onClick: this.onClickEdit.bind(this)
      }
    },
    {
      field: 'Delete',cellRenderer: 'deleteRenderer',
      headerClass: 'my-header-class',
      cellRendererParams: {
        onClick: this.onClickDelete.bind(this)
      }
    }];
    
     onClickEdit(params) {
     //code
     }
     
     onClickDelete(params) {
     //code
     }
     
     
     
    constructor() {
    this.frameworkComponents = {
      editRenderer: EditComponent,
      deleteRenderer: DeleteCompoenent
    }