Angular 6 ag-grid cell renderer click function

I use cellRenderFramework:

    {
    headerName: '', width: 30,
    cellRendererFramework: ActionCellRendererComponent,
    cellRendererParams: {
      icon: 'fa-download',
      action: this.downloadAttachmentAction
    }
  }

and than I have custom Component

@Component({
  selector: 'cu-download-link-cell-renderer',
  template: `
  <div class="text-center">
    <i class="fa {{params.icon}}" (click)="onClick()" aria-hidden="true"></i>
  </div>`
})
export class ActionCellRendererComponent {

    params;

    constructor() {
    }

    agInit(params): void {
        this.params = params;
        if (_.isNil(params.action)) {
            throw new Error('Missing action parameter for ActionCellRendererComponent');
       }
   }

   onClick(): void {
       this.params.action(this.params);
   }
}

export type CellAction = (params) => void;

Use cellRendererFramework to add action Buttons.

App.component.ts

columnDefs = [
  { headerName: 'First Name', field: 'firstName', sortable: true, filter: true },
  { headerName: 'Last Name', field: 'lastName', sortable: true, filter: true },
  { headerName: 'Email', field: 'email', sortable: true, filter: true },
  { headerName: 'User Name', field: 'userIdName', sortable: true, filter: true },
  { headerName: 'Role', field: 'role', sortable: true, filter: true },
  { headerName: 'Actions', field: 'action', cellRendererFramework: CellCustomComponent }];

rowData: any;

ngOnInit() {
  const empDatas = localStorage.getItem('user');
  const finalData = JSON.parse(this.empDatas);
  this.rowData = this.finalData;
}

In the above code, we can see CellCustomComponent. Create that component & add the buttons.

cell-custom.component.html

<button type="button" class="btn-success" (click)="editRow()">Edit</button>
<button type="button" class="btn-success" (click)="viewRow()">View</button>

Now in the cell-custom.component.ts add the functions

cell-custom.component.ts

export class CellCustomComponent implements OnInit {
  data: any;
  params: any;
  constructor(private http: HttpClient, private router: Router) {}

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

  ngOnInit() {}

  editRow() {
    let rowData = this.params;
    let i = rowData.rowIndex;
    console.log(rowData);
  }

  viewRow() {
    let rowData = this.params;
    console.log(rowData);
  }
}

After this we need to add this component in App.module.ts

app.Module.ts

@NgModule({
  declarations: [AppComponent, CellCustomComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([AppComponent])
  ],
  providers: [],
  entryComponents: [CellCustomComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now we can trigger a method in the component file using Button.

Yes, use the cellRendererFramework to handle the rendering.

In your columnDefs:

this.columnDefs = [
  {
    headerName: 'Header Name', field: 'field',
    cellRendererFramework: ColRenderer,
    cellRendererParams: { context: this },
    sortable: true, filter: true
  },
  ...
 ];

Then in your ColRenderer:

@Component({
  template: `<a (click)="clickHandler(rowData)">{{rowData.Member}}</a>`
})
export class ColRenderer implements ICellRenderer {
  public rowData: any;
  private params: any;

  public agInit(params: { data: any, context: any }) {
    this.rowData= params.data;
    this.params = params;
  };

  public clickHandler(data: any) {
    this.params.context.onEditClick(data);
  }
  ...
}

Change the names above obviously as needed. Just know the context is the key. You pass the context of your component to the renderer then use that context to call the function you want on click within your renderer.

it has been perfect! Thank you

prebilling-view.component.ts (cellRendererParams: { context: this })

 {
field: 'adjustmentUnit',
  tooltipField: 'adjustmentUnit',
  cellRendererParams: { context: this },
  cellRendererSelector: (params: any) => {
    const component = {
      component: 'textAreaVueRenderer',
      params: { values: true, textAlign: 'right', typeValue:false}
    }
    return component;
  },
  cellStyle: { textAlign: 'right' },
  headerClass: 'textRight',
},

function in prebilling-view.component.ts

onEditChange(val:string, index:any){
console.log("valor: "+ val)
console.log("index: "+ index)

}

input cellRenderSelector textAreaVueRender

  <input *ngIf="editEnabled"
            type="number"
            (input)="inputNegativeChangeHandler($event)"/>

function in cellRenderSelector textAreaVueRender component

 inputNegativeChangeHandler($event: any) {

this.params.context.onEditChange($event.target.value,this.params.rowIndex);

}