CODEWITHSUNDEEP
angularng-grid
Abru007
Abru007

Reputation: 481

Cannot read property 'api' of undefined angular while using nggride

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AgGridAngular } from 'ag-grid-angular';

@Component({
  selector: 'app-sub1',
  templateUrl: './sub1.component.html',
  styleUrls: ['./sub1.component.css']
})

export class Sub1Component implements OnInit {
  @ViewChild('agGrid',{static: false} ) agGride:AgGridAngular

  columnDefs = [
    {headerName:'make',field: 
'make',sortable:true,filter:true,checkboxSelection:true },
    {headerName:'model',field: 'model',sortable:true,filter:true  },
    {headerName:'price',field: 'price',sortable:true,filter:true }
  ];

  constructor(private http:HttpClient){}

  rowData :any;

  ngOnInit(){
    this.rowData=this.http.get('https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/sample-data/smallRowData.json')
  }

  getRow(){
    const selectedNodes = this.agGride.api.getSelectedNodes();
    const selectedData = selectedNodes.map( node => node.data );
    const selectedDataStringPresentation = 
      selectedData.map(node => node.make + ' ' + node.model).join(', ');
    console.log(`Selected nodes: ${selectedDataStringPresentation}`);
  }
}

Upvotes: 1

Views: 965

Answers (1)

Kaki Master Of Time
Kaki Master Of Time

Reputation: 1641

The API is only available after initialization of the grid, so try to delay the call of getRow() method by listening to the onGridReady() event and there you can be sure that you have the gridApi and that u can use it.

To see if this is what causing you the issue, you can use setTimeOut on the getRow() method and see if that solves it. Otherwise, try to find check the docs for how to get the API via initialization methods like onGridReady 

Upvotes: -2

Related Questions