Ag-grid gridOptions.api undefined in angular 2

Question

I am trying ag-grid in angular2 with typescript, for some reason I cannot use the ag-grid APIs getting an 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 attribute will be set and ready to use after the gridReady grid event has been gridReady .

In the line you are testing for it, gridOptions is just an empty object and even after that:

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

It will still not have an available api-hook in gridReady or angular ngOnInit , and you can safely call api.

Answer 2

Two questions...

First, as others have already mentioned, initialize the api grid link in onGridReady as follows.

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

Secondly, when ag-grid calls one of the handlers you provided (e.g. rowClicked), this no longer your instance of the corner component, so in your testClick() this.gridOptions === undefined .

To access the properties of your corner component in an AgGrid event callback, you must pass this via GridOptions.context as follows:

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

AgGrid events (usually) return a reference to this context object in the Event parameters.

 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 - GridApi is actually a RowClickedEvent property, so getting it through a context object, as shown in the figure, is redundant, but shows that access to the properties / methods of your corner component in the ag grid event can be done through the AgGridEvent context AgGridEvent .

Answer 3

This is due to component life cycles. In the constructor it is not yet initialized. (I assume that you have correctly assigned the gridOptions object to your grid.)

Try using it in

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

From the documentation

ngOnInit Initialize the directive / component after Angular first displays the data-related properties and sets the directive / component of the input property.

Get more information about lifecycles here .

Answer 4

Try the following:

 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 used vue.js. There was the same problem. But when I included: gridOptions = "gridOptions" in my ag-grid-vue component that solved my problem

Answer 6

I was looking for an answer to this using AngularJS. For those who are facing the same issue as me (although this was not an AngularJS specific issue), I found that the table was not called correctly in HTML. Since the table was never called, the API was never configured, and gridReady never worked. The syntax I used worked:

 <div class="table-body"> <div ag-grid="$ctrl.gridOptions" class="ag-theme-fresh ag-grid-container"></div> </div>