Angular 6 and Ag-grid

Question

I\'m doing a test with Angular 6 and Ag-Grid. I have done an example and it paints it, I mean the css and so on.

But by doing the example below and enter the real da

Answer 1

First, you need to understand the flow:

rowData - is immutable - you can't manipulate with is as with array, you can just re-create it. More info

you need to avoid using gridOptions for any action - it's only for init-configuration, for anything else - you need to use gridApi - which could be accessed on onGridReady function

(gridReady)="onGridReady($event)"
...
onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    let youData = [];
    this.competences.forEach((competence) => {
        youData.push({id: competence.id, name: competence.desc});
    });
    this.gridApi.setData(youData);
}

Answer 2

Try as below:

@Component({
  selector: "my-app",
  template: `<div style="height: 100%; box-sizing: border-box;">
    <ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    [rowData]="rowData"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [defaultColGroupDef]="defaultColGroupDef"
    [columnTypes]="columnTypes"
    [enableFilter]="true"
    [floatingFilter]="true"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
</div>`
})

export class AppComponent {
      private gridApi;
      private gridColumnApi;
      private rowData: any[];

      private columnDefs;
      private defaultColDef;
      private defaultColGroupDef;
      private columnTypes;

      constructor(private http: HttpClient) {
        this.columnDefs = [
          {
             headerName: 'ID',
             field: 'id',
             width: 100
          },
          {
             headerName: 'Nombre',
             field: 'name',
             width: 200
          }
        ];
}
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;
      });
  }