How can I change 'no rows to show' text programmatically in ag-grid?

Question

I have recently been tinkering with the Ag-grid . I want to change the 'no rows to show' text to 'data is loading...' , when I am fetching some data from the REST API . The data is being returned in the form of an array of JSON objects . However , if and when the API does return me an empty array , I want the 'Data is loading...' text to change to 'no rows to show' text.How can I achieve this? Thanks in advance.

Answer 1

This can be done by working with both the overlayLoadingTemplate and overlayNoRowsTemplate input binding property, as described on the documentation.

On your component.html, you will need to add it to your ag-grid selector,

<ag-grid-angular
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  [overlayLoadingTemplate]="loadingTemplate"
  [overlayNoRowsTemplate]="noRowsTemplate"
        .
        .
></ag-grid-angular>

And on your component.ts, you can set the no rows template. First, we define a new property called noRowsTemplate, which was assigned to overlayNoRowsTemplate on the html. Then, you pass the html string that represents your custom message to noRowsTemplate.

export class AppComponent {
  private noRowsTemplate;
  private loadingTemplate;

  constructor() {
    this.loadingTemplate =
      `<span class="ag-overlay-loading-center">data is loading...</span>`;
    this.noRowsTemplate =
      `"<span">no rows to show</span>"`;
  }
}

Here is the demo.