Data isnt populating in ag-grid using angular 7

Question

I am trying to populate the ag-grid in angular with json data and for some reasons the data isn't binding. I am using ag-grid community edition and angular 7. I have ensured the references to the ag-grid is correct. I have created stackblitz example to reproduce the issue

https://stackblitz.com/edit/angular-pz3gau

Component

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import "ag-grid-community";
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private components;
  private rowData: any;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Date",
        field: "date",
        editable: true,
        cellEditor: "datePicker"
      },
      {
        headerName: "Age",
        field: "age"
      },
      {
        headerName: "Country",
        field: "country"
      },
      {
        headerName: "Year",
        field: "year"
      },
      {
        headerName: "Sport",
        field: "sport"
      },
      {
        headerName: "Gold",
        field: "gold"
      },
      {
        headerName: "Silver",
        field: "silver"
      },
      {
        headerName: "Bronze",
        field: "bronze"
      },
      {
        headerName: "Total",
        field: "total"
      }
    ];

  }

   onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

html

 <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [columnDefs]="columnDefs"
      [components]="components"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

yashpatelyk yashpatelyk · Accepted Answer · 2019-06-19T10:43:49

Two things you need to change

In app.component.html, change style to style="width: 500px; height: 500px;"

Having 100% as width/height doesn't work here as parent container doesn't have height/width.

You forgot to import css files of ag-grid.

add these 2 files in style.css

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

Now you should see your data on the screen!

Data isnt populating in ag-grid using angular 7

1 Answers