Angular4 ag-Grid: API of GridOptions is undefined

Question

I am using the free Version of ag-Grid in my Angular 4 Application.

In the following code I want to resize the grid automatically in the constructor:

constructor(private modalService: NgbModal) {
    this.gridOptions = <GridOptions>{};

    const columnDefs = [...];
    const rowData = [...];

    this.gridOptions.columnDefs = columnDefs;
    this.gridOptions.rowData = rowData;

    this.gridOptions.api.sizeColumnsToFit();
}

But in the Developer-Tools I get the following Error:

ERROR TypeError: Cannot read property 'sizeColumnsToFit' of undefined

Answer 1

Hook the api functions to the Api object on the onGridReady event, wich you need to set in the Constructor...

 constructor() {
    this.gridOptions = <GridOptions>{
      onGridReady: () => {
        this.gridOptions.api.addEventListener('rowClicked', this.myRowClickedHandler);
      }
    };

myRowClickedHandler(event) {
     this.createdDate = event.data.createdDate;
}

Answer 2

The gridOptions.api is only available after you have created a new agGrid.Grid instance. For example:

this.gridOptions = <GridOptions>{};
//just an empty object right now

const columnDefs = [...];
const rowData = [...];

this.gridOptions.columnDefs = columnDefs;
this.gridOptions.rowData = rowData;
// all the gridOptions has right now is columnDefs and rowData attributes

this.gridOptions.api.sizeColumnsToFit();

//wherever you create the grid instance...
new agGrid.Grid(gridDiv, gridOptions)
//now the gridOptions object that you created has been filled out
//     with the api and columnApi attributes and functions

Answer 3

sometimes instead of this.gridOptions.api.setColumnDef use this.gridOptions.columnDef = [] fixes the issue

Answer 4

create binding for grid options and grid ready in html:

  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"

Define an empty grid options variable in your component:

gridOptions: GridOptions = {}

And then in grid ready you can use the grid options:

onGridReady(params) {
  this.gridOptions.isExternalFilterPresent  =  this.isExternalFilterPresent.bind(this)
  this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)   
}