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

Question

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

Answer 1

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