Im fairly new to Angular/Typescript. Im kinda learning and developing at the same time. Im trying to build a grid with data loaded from a Json file and Im having some issues with showing my Data. I'd love if you guys could point to my error, cuz my code piles with no errors and Im kinda helpless at the moment.

Ill provide my code below. Thanks in advance.

my-grid-applicationponent.ts

@Component({
  selector: 'app-my-grid-application',
  templateUrl: './my-grid-applicationponent.html'
})
export class MyGridApplicationComponent {
  private gridOptions: GridOptions;
  things:Things[];

  getThings(){
    this.myGridApplicationService.getThings().subscribe( things => 
this.things = things)
  }

constructor( private myGridApplicationService: MyGridApplicationService) {
    this.gridOptions = <GridOptions>{};
    var gridOptions = {
        onGridReady: function() {
    this.gridOptions.api.setRowData(this.things);
        }
    }
    this.gridOptions.columnDefs = [
        {
            headerName: "ID",
            field: "id",
            width: 100
        },
        {
            headerName: "Value",
            field: "value",
            cellRendererFramework: RedComponentComponent,
            width: 100
        },

    ]; 
  } 
}

my-grid-application.service.ts

export class Things{

}

@Injectable()
export class MyGridApplicationService {
  constructor(private http: Http){ }

  getThings(){
    return this.http.get('src/assets/data.json')
        .map((response:Response)=> <Things[]>response.json().data)
  }
}

data.json

{
"data" :[
    {
        "id": "red",
        "value": "#f00"
    },
    {
        "id": "green",
        "value": "#0f0"
    }
]
}

my-grid-applicationponent.html

<div style="width: 200px;">
  <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-
theme-fresh"
           [gridOptions]="gridOptions">

Im fairly new to Angular/Typescript. Im kinda learning and developing at the same time. Im trying to build a grid with data loaded from a Json file and Im having some issues with showing my Data. I'd love if you guys could point to my error, cuz my code piles with no errors and Im kinda helpless at the moment.

Ill provide my code below. Thanks in advance.

my-grid-application.ponent.ts

@Component({
  selector: 'app-my-grid-application',
  templateUrl: './my-grid-application.ponent.html'
})
export class MyGridApplicationComponent {
  private gridOptions: GridOptions;
  things:Things[];

  getThings(){
    this.myGridApplicationService.getThings().subscribe( things => 
this.things = things)
  }

constructor( private myGridApplicationService: MyGridApplicationService) {
    this.gridOptions = <GridOptions>{};
    var gridOptions = {
        onGridReady: function() {
    this.gridOptions.api.setRowData(this.things);
        }
    }
    this.gridOptions.columnDefs = [
        {
            headerName: "ID",
            field: "id",
            width: 100
        },
        {
            headerName: "Value",
            field: "value",
            cellRendererFramework: RedComponentComponent,
            width: 100
        },

    ]; 
  } 
}

my-grid-application.service.ts

export class Things{

}

@Injectable()
export class MyGridApplicationService {
  constructor(private http: Http){ }

  getThings(){
    return this.http.get('src/assets/data.json')
        .map((response:Response)=> <Things[]>response.json().data)
  }
}

data.json

{
"data" :[
    {
        "id": "red",
        "value": "#f00"
    },
    {
        "id": "green",
        "value": "#0f0"
    }
]
}

my-grid-application.ponent.html

<div style="width: 200px;">
  <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-
theme-fresh"
           [gridOptions]="gridOptions">

• javascript
• json
• angular
• ag-grid

2 Answers 2

I'm not an Ag-Grid expert, but why are you re-declaring gridOptions with var gridOptions in the constructor. This is the obvious mistake and should be corrected:

this.gridOptions = {
    onGridReady: function() {
        this.gridOptions.api.setRowData(this.things);
    }
}

because that is the property you're accessing in the template.

Check this StackBlitz from my Github

//MyGridApplication
constructor( private myGridApplicationService: MyGridApplicationService) {
    myGridApplicationService.getThings()
        .subscribe( things => this.things = things);

    this.gridOptions = <GridOptions>{};
    this.gridOptions = {
        onGridReady: () => {
            this.gridOptions.api.setRowData(this.things);
        }
    };

    this.gridOptions.columnDefs = [
        {
            headerName: "ID",
            field: "id",
            width: 100
        },
        {
            headerName: "Value",
            field: "value",
            cellRendererFramework: RedComponentComponent,
            width: 100
        },

    ]; 
} 

When onGridReady() is fired, "this.things" is not populated yet. try this:

var gridOptions = {
    rowData: this.things
}