ag-grid gridOptions.api undefined in angular 2

Question

I am trying ag-grid in angular2 with typescript, for some reasons I am not able to use the ag-grid APIs, getting undefined error.,

here is the code..,

import { AgRendererComponent } from 'ag-grid-ng2/main';
import { GridOptions, RowNode } from 'ag-grid/main';
import { GridOptionsWrapper } from 'ag-grid/main';
import { GridApi } from 'ag-grid/main';

public gridOptions: GridOptions;

constructor()
 {
    this.gridOptions = <GridOptions>{};

    alert(this.gridOptions);
    alert(this.gridOptions.api); // *** getting undefined  ***


    this.gridOptions = <GridOptions>{
        columnDefs: this.columnDefs(),
        rowData: this.rowData,
        onSelectionChanged: this.onSelectionChanged,
        groupSelectsChildren: true,
        suppressRowClickSelection: true,

        rowSelection: 'multiple',
        enableColResize: true,
        enableSorting: true,
        rowHeight: 45}

}//constructor

Please advise, Thanks

Updated with code in comment below

onGridReady() {
    console.log(this.gridOptions.api); // here it work
    this.selectedRows = this.gridOptions.api.getSelectedRows();
    console.log(this.selectedRows);
}

private testClick(event): void {
    try {
        console.log(this.gridOptions.api); // here gives error
        this.selectedRows = this.gridOptions.api.getSelectedRows();
        console.log(this.selectedRows); //getting error saying undefined
    }
}

Answer 1

The gridOptions api will be set and ready to use once the grid's gridReady event has been called.

At the line you're testing for it, gridOptions is just an empty Object, and even after you do this:

this.gridOptions = <GridOptions>{
     columnDefs: this.columnDefs(),
     ...other lines

It still won't have the api available - hook into the gridReady or angular's ngOnInit events and you'll be able to invoke the api safely.

Answer 2

Two issues...

First ,as others have mentioned, initialise a reference to the grid api in onGridReady like so

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

Secondly, when ag-grid calls one of your provided handlers (E.g. rowClicked), this is no longer your angular component instance, so in your testClick() method this.gridOptions === undefined.

To access properties of your angular component in an AgGrid Event callback you should pass this via GridOptions.context like this:

this.gridOptions = <GridOptions>{
     context: {parentComponent: this},
     ...other lines

AgGrid's events (generally) return a reference to this context object in the Event params..

rowClicked(rowClicked: RowClickedEvent) {
    const localGridApiRef = rowClicked.context.parentComponent.gridApi;

    // do stuff with the grid api...
    const selectedRows = localGridApiRef.getSelectedRows();
};

Note: I'm not sure how you used testClick() but my rowClicked() would be interchangeable I expect...

Note 2 - The GridApi is actually a property of RowClickedEvent, so while getting it via the context object as shown is superfluous, it illustrates the point that accessing properties/methods of your angular component in an ag grid event can be done via AgGridEvent's context property.

Answer 3

It's because of component lifecycles. In constructor it's not initialized yet. (I'm assuming you assigned gridOptions object to your grid properly.)

Try using it in

ngOnInit() { 
    console.log(this.gridOptions.api)
}

From the documentation

ngOnInit Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

Get more info about lifecycles here.

Answer 4

Try this:

export class MyComponent implements OnInit {
  selected = () => console.log('ID: ', this.gridOptions.api.getSelectedRows()[0].id);

  gridOptions: GridOptions = {
    columnDefs: [
        {headerName: 'ID', field: 'id', width: 80},
        { ... }
    ],
    rowSelection: 'single'
  }

  ngOnInit() {
    this.gridOptions.rowData = this.gridData;
    this.gridOptions.onSelectionChanged - this.selected;
  }

It worked for me!

Answer 5

I was using vue.js Had same issue. But when I included :gridOptions="gridOptions" in my ag-grid-vue component that solved my problem