Updating row data in ag-grid angular4

Question

In AngularJS, I was able to update a grid's row data by doing something like `gridOptions.api.setRowData(rowData).

I'm attempting to do this now in an Angular4 application. My TS file has:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AgGridModule } from 'ag-grid-angular/main';
import { GridOptions, RowNode } from 'ag-grid/main';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app a4';
  studentList = {};
  gridOptions = {};


   constructor(private http: HttpClient){
       this.gridOptions = <GridOptions>{
           context: {
               componentParent: this
           },
           columnDefs: this.createColumnDefs(),
           rowDefs: this.studentList,
       };
   }

   ngOnInit(): void {
     this.http.get('students/list').subscribe(data => {
       this.studentList = data;
       console.log(data);
       this.gridOptions.api.setRowData(this.studentList);
     });
   }

       private createColumnDefs() {
           return [
               {
                   headerName: "Name",
                   field: "name",
                   width: 400
               },
               {
                   headerName: "SSN",
                   field: "ssn",
                   width: 400,
               }
           ];
       }

}

But, on compilation, angular-cli doesn't like `api. According to AG-Grid documentation, this seems to still be the right way to do things. I can't tell from the examples what I'm missing.

ERROR in C:/Projects/spring-boot-mvc-test/frontend/src/app/app.component.ts (31,25): Property 'api' does not exist on type '{}'.

Dathov Dathov · Accepted Answer · 2018-04-17T13:48:10

The gridOptions seems to be empty in the ngOnInit. Try this:

ngOnInit(): void {
  let that: this = this;
  this.http.get('students/list').subscribe(data => {
    this.studentList = data;
    console.log(data);
    that.gridOptions.api.setRowData(this.studentList);
  });
}

Updating row data in ag-grid angular4

1 Answers