Ag-Grid Set Column and Row Data Dynamically

Question

I have a TypeScript class where I call a method that calls a back-end api to get data from the server to put into a grid. At the moment I have hard-coded columns and rows just to test how I will do this. When I put the column and row setting code as in the example below I get the grid correctly populated.

export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions: GridOptions;
  private data: any;

  constructor(private http:HttpClient ) { 
    this.getFoo();

this.gridOptions = <GridOptions>{};
          this.gridOptions.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
          ];
          this.gridOptions.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
          ];
  }

  getFoo(){
    this.http.get(`https://xxx`).subscribe(response => {
      this.data = response;
    }, error => {
      console.log(error);
    });
  }

But when I put the column and row setting code inside the getFoo method, which is where I want it, my grid's data does not get set and I get a loading box.

export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions: GridOptions;
  private data: any;

  constructor(private http:HttpClient ) { 
    this.getFoo();
  }

  getFoo(){
    this.http.get(`https://xxx`).subscribe(response => {
      this.data = response;

      this.gridOptions = <GridOptions>{};
          this.gridOptions.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
          ];
          this.gridOptions.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
          ];
    }, error => {
      console.log(error);
    });
  }

I tried to resolve this by returning a promise from getFoo and then setting the column and row data inside the 'then' of the promise but got the same loading box.

Here is my markup.

<ag-grid-angular 
    style="width: 700px; height: 500px;" 
    class="ag-theme-balham"
    [gridOptions]="gridOptions"
    >
</ag-grid-angular>

Any ideas?

Miroslav Maksimovic Miroslav Maksimovic · Accepted Answer · 2019-10-24T11:25:45

You can do it like this:

  export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions$: Observable<GridOptions>;

  constructor(private http:HttpClient ) { 
 }
 ngOnInit() { this.getFoo(); } // call it here, not in constructor

 getFoo(){ 
   this.gridOptions$ = this.http.get(`https://xxx`);
 }

You can transform the http request by doing .map on it and do your business logic, and that response will be observable.

After that just in html call it like this:

<ag-grid-angular 
style="width: 700px; height: 500px;" 
class="ag-theme-balham"
[gridOptions]="gridOptions$ | async"
>

This will asynchronously update the model and trigger change detection for you.

Ag-Grid Set Column and Row Data Dynamically

1 Answers