Angular Data GridOverlay Component
angular logo

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

There are two types of overlay components:

  • Loading Overlay: Overlay for when the grid is loading data.
  • No Rows: Overlay for when the grid has loaded an empty array of rows.

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.

Implementing a Loading Overlay Component

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

interface extends ILoadingOverlayAngularComp {
    // mandatory methods

    // The agInit(params) method is called on the overlay once.
    agInit(params: ILoadingOverlayParams);

    // optional methods

    // Gets called when the `loadingOverlayComponentParams` grid option is updated
    refresh(params: ILoadingOverlayParams): void;

}

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

Properties available on the ILoadingOverlayParams<TData = any, TContext = any> interface.

Implementing a No Rows Overlay Component

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

interface extends INowRowsOverlayAngularComp {
    // mandatory methods

    // The agInit(params) method is called on the overlay once.
    agInit(params: INoRowsOverlayParams);

    // optional methods

    // Gets called when the `noRowsOverlayComponentParams` grid option is updated
    refresh(params: INoRowsOverlayParams): void;
}

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

Properties available on the INoRowsOverlayParams<TData = any, TContext = any> interface.

Registering Overlay Components

See Registering Custom Components for details on registering and using custom overlays.