Ag-Grid onGridReady not getting parameters?

Question

I've been working with ag-grid, and on looking at other samples I've seen the following snippet of code that people use to save the ag-grid api as a variable for later use.

HTML:

 template: `
<ag-grid-angular
  id="grid"
  style="width: 100vw;"
  [style.height] = 'height'
  class="ag-theme-balham ag-grid"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>`

Typescript:

onGridReady(params){
this.resizeGrid();
this.gridApi = params.api;
this.columnsApi = params.columnApi;}

I've been trying to do something similar, however when I try the same, params is showing up as "undefined". I've tried all manner of methods to try to get the api, but it's just not working for me. My grid loads correctly with the data I've passed to it, but it keeps telling me the params.api is undefined. What am I missing here?

Answer 1

Managed to figure it out after a bit more trial & error, posting the solution just in case anyone is having the same problem.

I took out the (gridReady)="onGridReady($event)" from my HTML code, and added the following to my GridOptions declaration:

onGridReady: this.onGridReady.bind(this),

After that I created a new method to set the api, which seems to work just fine.

onGridReady(event: any){
this.gridApi = event.api;
this.gridApi.sizeColumnsToFit();
}

Answer 2

Can you try removing the gridOptions from your HTML template

<ag-grid-angular
  style="width: 600px; height: 500px;"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [animateRows]="true"
  [pagination]="true"
  [sortingOrder]="sortingOrder"
  (gridReady)="onGridReady($event)"

></ag-grid-angular>

Note: Not using gridoptions in the above HTML template.

And if you want to load data from the API. In .ts file

  onGridReady(params) {
    this.gridApi = params.api;
    console.log('grid api', params.api);
    this.gridColumnApi = params.columnApi;
    // const dataValue = [{firstName: 'Ragavan', age: 31}, {firstName: 'Mike', age: 50}];
    this.http.get('https://your-mock-url/params')
      .subscribe(data => {
          params.api.setRowData(data);
        }
      );
  }

Try the above code. Hope it should work.