Angular Data GridActive Overlay

The active overlay can be controlled by the application regardless of the state of the grid. It can re-use the built-in overlay components or provide completely custom implementations.

Application Overlays Copy Link

To display an overlay programmatically, independent of the state of the grid, set the activeOverlay / activeOverlayParams grid options. To clear the overlay, reset activeOverlay to undefined.

The activeOverlay grid option accepts the following values:

• A string key of one of the built-in overlays e.g 'agLoadingOverlay'
• A string key to resolve a custom component from the components map
• A component class or function to instantiate the overlay directly.

Implement the IOverlayComp interface to provide a custom overlay; the grid will supply IOverlayParams whenever the component is created or refreshed.

interface IOverlayAngularComp {
  // Mandatory - Params for rendering this component. 
  agInit(params: IOverlayParams): void;

  refresh?(params: TParams): void;

}

Setting activeOverlay to 'agLoadingOverlay' or 'agNoRowsOverlay' will display the built-in overlays, while any other value will attempt to render the referenced custom component. When the loading property is true, the loading overlay takes precedence even if activeOverlay is set. Clear the overlay by resetting activeOverlay to null or undefined.

The example above demonstrates using a custom overlay component by passing the component class directly to activeOverlay.

The example above demonstrates switching between the built-in loading and no-rows overlays, as well as hiding the overlay entirely.