ag-grid: Using Grid Event CellClicked for specific column - cannot access "this"

Question

I have a column in grid which when clicked I am trying to access some method of class but the this context has changed and not available. Ex -

export class PreTflGridComponent implements OnInit {  

  columnDefs = [
    {onCellClicked: this.editCellClicked}
  ];

  constructor() { }   

  method(): void {
      console.log('working');
  }

  editCellClicked(params) {
    this.method();
  }  

}

Error:

ERROR TypeError: this.method is not a function

How can I access the methods/properties once the this context has changed.

Refer below for the exact issue https://stackblitz.com/edit/angular-vwgcc2, if you will click the column make and open up console then it would show the error I am facking.

Answer 1

this seems to be giving you the actual row. What you need to do is tell your makeCellClicked method what this actually is by binding this to it like:

onCellClicked: this.makeCellClicked.bind(this).

Please also see your updated StackBlitz.

Answer 2

You should use cellRenderer property with simple logic. More convenient way for complex logic renderer you should use cellRendererFramework: YourCustomRendererAngularComponent.

columnDefs = [
{
  headerName: 'Col Name',
  cellRendererFramwork: MyAngularRendererComponent, // RendererComponent suffix it is naming convention
  cellRendererParams: {
    onClick: (params) => this.click(params);  
  }
},
...
]

MyAngularRendererComponent should implements AgRendererComponent.

Also in angular module where you use MyAngualrRendererComponent don`t forget put this code:

@NgModule({
 imports: [
   AgGridModule.withCompoennts([
      MyAngualrRendererComponent 
   ])
 ]
})

The above code is just a small part, check out full example on Stackblitz