referencing 'this' in ag-grid events

Question

In ag-grid events, e.g. onRowSelected(), 'this' refers to the grid object. However, I need to reference component variables and don't know how to. What I did was this, but it is a hack:

initializeGridOptions() {
    this.gridOptions = {
      columnDefs: [
        { headerName: "Core #", field: "coreNumber", width: 100, sort: 'asc' },
      onRowSelected: this.onRowSelected,
    }
    this.gridOptions['_this'] = this;  // HACK
  }

  onRowSelected(event: any) {
    if (event.node.selected) {
      (this as any)._this.selectedNode = event.node.data;
    }
  }

Is there a better way?

Answer 1

Enumerating the various ways you could solve this problem -
1. Use of arrow function:

   onRowSelected : (event: any) => { ... }

2. Use of bind() :

onRowSelected: this.onRowSelected.bind(this)
This approach is useful if your onRowSelected is tightly coupled to your component and it is meant to be used only with that grid.

3.Use of ag-grid context gridOption:

However if you would want to share a single function across many grids and lets say have this function in a grid utility service.
Then you can use the below approach. In gridOptions, use the context option

gridOptions = { context : {parentComponent: this}...}
and onRowSelected: this.gridUtilityService.onRowSelected

Within onRowSelected you can access context using :
const ctx = params.context.parentComponent to reference component varibles