angular - How to call a service from ag grid drag & drop event

Question

I have an ag-grid set up with options to trigger drag and drop events:

this.gridOptions = {
      columnDefs: this.getColumnDefs(),
      rowDragManaged: true,
      onRowDragEnter: this.onRowDragEnter,
      onRowDragEnd: this.onRowDragEnd,
...

I also have a simple service

export class myService {
...
   public doSomething(): void {
        ...
   }
}

It seems I cannot call the doSomething service function from within the onRowDragEnd event - getting a cannot read property 'doSomething' of undefined... at Object.onRowDragEnd error.

I know the service is defined and working correctly, doSomething can be called from the grid component's init function, so I'm just not sure how I can call something external to the grid or any workaround ?

Answer 1

Arrow functions will execute in their lexical context regardless of the caller. Try this:

this.gridOptions = {
      columnDefs: this.getColumnDefs(),
      rowDragManaged: true,
      onRowDragEnter: (event: RowDragEvent) => {
           this.onRowDragEnter(event);
      },
      onRowDragEnd: (event: RowDragEvent) => {
           this.onRowDragEnd(event);
      }
...

Edit: I updated this answer so you can pass the params from the event to your handler.