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

Did the answer of @Jarod Moser answer your question? I cannot get my grid to work in angular4 either. If your code is working, could you please post it so I could get some help too. Thanks — st_clair_clarke, May 07 '17 at 19:54

score 1 · Answer 1 · answered May 21 '17 at 05:44

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;
}

score 0 · Answer 2 · answered Apr 04 '17 at 18:24

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

How do I use the gridDiv in new agGrid.Grid(gridDiv, gridOptions). Is it a template variable? — st_clair_clarke, May 07 '17 at 19:55

score 0 · Answer 3 · answered Jan 05 '21 at 14:50

0

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

answered Jan 05 '21 at 14:50

Dinesh Khetarpal

363
3
5

score 0 · Answer 4 · answered Feb 11 '21 at 09:36

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)   
}

score 0 · Answer 5 · answered Sep 30 '21 at 20:02

Assign your gridOptions.api to the event.api in the onGridReady callback:

// gridOptions as a component field

gridOptions = {
    onGridReady(event: GridReadyEvent) {
        this.api = event.api
    }
}

Then you'll have access to the api through this.gridOptions.api once the grid is ready. Also, make sure you don't use an arrow function (lambda), or else this will refer to the component and not the gridOptions.

Angular4 ag-Grid: API of GridOptions is undefined

5 Answers5