Show data from server in ag-grid

I am using ag-grid in my Angular 4 project.

I am fetching data from the server and then trying to display it in a table, but the table remains empty (although the data exists).

To be sure what the problem is, I have *ngFor

one that generates the same data and I can see it displaying on screen.

I also manage to display data in an ag grid if I write it manually (hardcoded) and it is parsed on page load without any ajax request.

HTML:

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


<table class="table">
  <tr>
    <th>
      Foo
    </th>
    <th>
      Bar
    </th>
  </tr>
  <tr *ngFor="let item of gridOptions.rowData; let myIndex = index">
    <td>
      {{item.foo}}
    </td>
    <td>
      {{item.bar}}
    </td>
  </tr>
</table>

      

        
        
        
      

    

c

export class HomeComponent implements OnInit {
private gridOptions: GridOptions;

constructor(
  private adsService: AdsService
) {
  this.gridOptions = {};

  this.gridOptions.columnDefs = [
    {
      headerName: "Foo",
      field: "foo",
      width: 100
    },
    {
      headerName: "Bar",
      field: "bar",
      width: 100
    },
  ];

  this.gridOptions.rowData = [];
}

  ngOnInit(){
    this.myService
       .getAll()
       .subscribe(item => this.gridOptions.rowData = item);
  }
}

      

        
        
        
      

    

So I probably need to somehow let ag-grid know that the data has changed, I just don't know how.