Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: Overlay Component

Overlay components allow you to add your own overlays to AG Grid. Use these when the provided overlays do not meet your requirements.

Simple Loading Overlay Component

Below is a simple example of a loading overlay component:

import {Component} from '@angular/core';
import {ILoadingOverlayParams} from "@ag-grid-community/core";
import {ILoadingOverlayAngularComp} from "@ag-grid-community/angular";

@Component({
   selector: 'app-loading-overlay',
   template: `
     <div class="ag-overlay-loading-center" style="background-color: lightsteelblue;">
       <i class="fas fa-hourglass-half">{{ this.params.loadingMessage }} </i>
     </div>
   `
})
export class CustomLoadingOverlay implements ILoadingOverlayAngularComp {
   private params: ILoadingOverlayParams;

   agInit(params: ILoadingOverlayParams): void {
       this.params = params;
   }
}

Simple No-Rows Overlay Component

Below is a simple example of a no rows overlay component:

import {Component} from '@angular/core';
import {INoRowsOverlayParams} from "@ag-grid-community/core";
import {INoRowsOverlayAngularComp} from "@ag-grid-community/angular";

@Component({
   selector: 'app-no-rows-overlay',
   template: `
     <div class="ag-overlay-loading-center" style="background-color: lightcoral;">
       <i class="far fa-frown"> {{ this.params.noRowsMessageFunc() }} </i>
     </div>`
})
export class CustomNoRowsOverlay implements INoRowsOverlayAngularComp {
   private params: INoRowsOverlayParams;

   agInit(params: INoRowsOverlayParams): void {
       this.params = params;
   }
}

Example: Custom Overlay Components

The example below demonstrates how to provide custom overlay components to the grid. Notice the following:

  • Custom Loading Overlay Renderer is supplied by name via gridOptions.loadingOverlayComponent.
  • Custom Loading Overlay Renderer Parameters are supplied using gridOptions loadingOverlayComponentParams.
  • Custom No Rows Overlay Renderer is supplied by name via gridOptions.noRowsOverlayComponent.
  • Custom No Rows Overlay Renderer Parameters are supplied using gridOptions.noRowsOverlayComponentParams.

Overlay Components Interfaces

Loading Overlay

Implement this interface to provide a custom overlay when data is being loaded.

interface extends ILoadingOverlayAngularComp { // The init(params) method is called on the overlay once. See below for details on the parameters. agInit(params: ILoadingOverlayParams); }

No Rows Overlay

Implement this interface to provide a custom overlay when no rows loaded.

interface extends INowRowsOverlayAngularComp { // The init(params) method is called on the overlay once. See below for details on the parameters. agInit(params: INoRowsOverlayParams); }

The agInit(params) method takes a params object with the items listed below:

ILoadingOverlayParams

Properties available on the ILoadingOverlayParams interface.

api
GridApi

INoRowsOverlayParams

Properties available on the INoRowsOverlayParams interface.

api
GridApi

Registering Overlay Components

See the section registering custom components for details on registering and using custom overlays.