Angular Data GridOverlay Component
Overlay components allow you to add your own overlays to AG Grid. Use these when the provided overlays do not meet your requirements.
Loading Overlay Component
Below is a example of loading overlay class with a custom loadingMessage
param:
import {Component} from '@angular/core';
import {ILoadingOverlayParams} from "ag-grid-community";
import {ILoadingOverlayAngularComp} from "ag-grid-angular";
@Component({
selector: 'app-loading-overlay',
template: `
<div class="ag-overlay-loading-center" style="background-color: lightsteelblue;">
<i class="fas fa-hourglass-half">{{ params.loadingMessage }} </i>
</div>
`
})
export class CustomLoadingOverlay implements ILoadingOverlayAngularComp {
public params: ILoadingOverlayParams & { loadingMessage: string};
agInit(params: ILoadingOverlayParams & { loadingMessage: string}): void {
this.params = params;
}
}
const gridOptions: GridOptions = {
...
loadingOverlayComponent: CustomLoadingOverlay,
loadingOverlayComponentParams: {
loadingMessage: 'One moment please...',
},
}
No-Rows Overlay Component
Below is an example of no rows overlay class with custom noRowsMessageFunc()
param:
import {Component} from '@angular/core';
import {INoRowsOverlayParams} from "ag-grid-community";
import {INoRowsOverlayAngularComp} from "ag-grid-angular";
@Component({
selector: 'app-no-rows-overlay',
template: `
<div class="ag-overlay-loading-center" style="background-color: #b4bebe;">
<i class="far fa-frown"> {{ params.noRowsMessageFunc() }} </i>
</div>`
})
export class CustomNoRowsOverlay implements INoRowsOverlayAngularComp {
public params: INoRowsOverlayParams & { noRowsMessageFunc: () => string};
agInit(params: INoRowsOverlayParams & { noRowsMessageFunc: () => string}): void {
this.params = params;
}
}
const gridOptions: GridOptions = {
...
noRowsOverlayComponent: CustomNoRowsOverlay,
noRowsOverlayComponentParams: {
noRowsMessageFunc: () => 'Sorry - no rows! at: ' + new Date(),
},
}
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 agInit(params) method is called on the overlay once.
agInit(params: ILoadingOverlayParams);
}
No Rows Overlay
Implement this interface to provide a custom overlay when no rows loaded.
interface extends INowRowsOverlayAngularComp {
// The agInit(params) method is called on the overlay once.
agInit(params: INoRowsOverlayParams);
}
The agInit(params)
method takes a params object with the items listed below:
Registering Overlay Components
See the section registering custom components for details on registering and using custom overlays.