How to use showLoadingOverlay in ag grid during ngoninit

Question

I am using ag grid to display table in one of my application. I could not able to see the loading message when data is getting loaded during the application initialization. Below is my code,

ngOnInit() {
    this.gridOptions =
{
    columnDefs: this.columnDefs,
    overlayLoadingTemplate:
'<span class="ag-overlay-loading-center">Please wait while your rows are loading</span>',
    rowData: [],
    enableCellChangeFlash: true,
    onGridReady: function (params)
    {
        params.api.setRowData(this.rowData);
        params.api.showLoadingOverlay();
        
    },
    onFirstDataRendered(params)
    {
        params.api.sizeColumnsToFit();
    },
    defaultColDef: {
        flex: 1,
        minWidth: 100,
        resizable: true,
        headerCheckboxSelection: this.isFirstColumn,
        checkboxSelection: this.isFirstColumn,
      },
      suppressRowClickSelection: true,
      rowSelection: 'multiple',
};


    //var user_from_date = this.fromDate
    
    
}

Answer 1

In your code, you set the row data when the grid is ready, which means ag-grid will show the data instantly after initializing the API, that's why you cannot see anything loading. If you delay a bit, you may see the loading overlay.

onGridReady: function (params)
{
   params.api.showLoadingOverlay();
   setTimeout(() => {
      params.api.setRowData(this.rowData);
   }, 500);
},

A small note is that ag-grid tries to handle the overlay for you internally if possible, so you don't have to call GridApi.hideOverlay() when the data is fetched.

Live Demo