Ag-grid Angular firstDataRendered does not fire

Question

I am using ag-grid for my data table. When testing the event firstDataRendered, it does not fire at all while gridReady does fire. I just have a basic function fire() { console.log("HEY") } assigned to it. Is there anything that blocks this event from fire?

<ag-grid-angular 
  style="width: auto; height: 250px"
  [rowData]="tblData"
  [columnDefs]="tableHeaders"
  [gridOptions]="gridOptions"
  [defaultColDef]="defaultColDef"
  (firstDataRendered)="fire($event)"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

Answer 1

I'm not sure if this is applicable to your issue, but firstDataRendered will not fire if there are no rows for the grid (seems lame to me but they say this is by design).

You can detect this in the gridReady event by checking the row data length:

 if (this.rowData.length === 0) {
     // firstDataRendered will not fire here - 
     // but this is where you can process the 'no data' code. 
  }

Answer 2

firstDataRendered function would not fire if you are using subscribe on your Observable to fill the property tblData that is binded to [rowData] in your html template.

If you convert your observable to promise then the data would be filled in the grid instantly and then your firstDataRendered function would get fire after your gridready function and you can apply your logic there as per your requirement.

You can convert observable to promise in just one line of code as below :

let promisevar = observable.toPromise()

Now you can apply your logic to populate the grid inside then condition as below :

promisevar.then('logic to populate grid');

Hope this helps someone facing the same issue.