Repopulate ag-grid with data

Question

I am initialising the ag-grid from the html using an onGridReady method in the component file.

<div style="flex-grow:1;">
    <ag-grid-angular

      style="float:left;width: 100%; height: 201px;margin-top:10px;"
      class="ag-theme-balham"
      [gridOptions]="gridOptions"
      [columnDefs]="columnDefs"
      (gridReady)="onGridReady($event)"
      [rowData]="rowData"
      #grid
    >
    </ag-grid-angular>
  </div>

In my .ts file i am handling the onGridReady like below :

onGridReady(params?: any) {
    console.log("onGridReady");
    var datasource = {
      getRows: (params: IGetRowsParams) => {
        this.info = "Getting datasource rows, start: " + params.startRow + ", end: " + params.endRow;
        console.log(this.info);
        this.getRowData().then(data => {
          if (this.stopApiCalls) {
            var lastRow = this.allTableData.length;
            params.successCallback(data, lastRow)
          }
          else {
            params.successCallback(data)
          }
        })
      }
    };
    console.log(">>",datasource);
    params.api.setDatasource(datasource);
  }

this.getRowData is used to get the data from the backend service using http.

I now need to reinitalise and use onGridReady on a certain event handled in a different component file. I am able to access the methods in my ag-grid component. But how can i call the onGridReady event from the other component?

Answer 1

gridReady event occurs exactly after grid initialization, so if you wanna to get dynamic component it would require a more complex solution.

possible hack: rerender the view, via router with dynamic parameters