Applications can display an overlay on demand regardless of grid state. This is achieved by providing an active overlay which can be one of the provided overlays or be a custom overlay component.
import { Component, signal } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
ClientSideRowModelModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import type { ColDef, GridApi, GridReadyEvent } from "ag-grid-community";
import { CustomOverlayComponent } from "./custom-overlay.component";
import "./styles.css";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule]);
interface IAthlete {
athlete: string;
country: string;
}
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<div class="example-wrapper">
<div class="button-row">
<button (click)="showActiveOverlay()">Show custom overlay</button>
<button (click)="clearActiveOverlay()">Hide custom overlay</button>
<button (click)="incParam()">Increment Param</button>
</div>
<ag-grid-angular
style="width: 100%; height: 100%;"
class="grid-wrapper"
[columnDefs]="columnDefs"
[rowData]="rowData"
[activeOverlay]="activeOverlay()"
[activeOverlayParams]="activeOverlayParams()"
/>
</div>`,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "athlete", flex: 1 },
{ field: "country", flex: 1 },
];
rowData: IAthlete[] | null = [
{ athlete: "Michael Phelps", country: "United States" },
{ athlete: "Natalie Coughlin", country: "United States" },
{ athlete: "Aleksey Nemov", country: "Russia" },
{ athlete: "Alicia Coutts", country: "Australia" },
];
activeOverlay = signal<any>(CustomOverlayComponent);
activeOverlayParams = signal({ count: 1 });
showActiveOverlay() {
this.activeOverlay.set(CustomOverlayComponent);
}
clearActiveOverlay() {
this.activeOverlay.set(undefined);
}
incParam() {
this.activeOverlayParams.update((prev) => ({ count: prev.count + 1 }));
}
}
Display an Active Overlay Copy Link
To display an overlay on demand set the activeOverlay / activeOverlayParams grid option. To clear the overlay set activeOverlay = undefined.
Display an overlay on demand. If provided takes precedence over the grid provided overlays. agLoadingOverlay, agNoRowsOverlay, agNoMatchingRowsOverlay, agExportingOverlay components map. undefined to clear. |
Custom parameters to be supplied to the activeOverlay component in addition to IOverlayParams. Updating the params will trigger a refresh of the active overlay. |
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;
// Gets called when the `overlayComponentParams` grid option is updated
refresh?(params: TParams): void;
}The example below demonstrates using the grid provided overlays as an active overlay. Note the following:
- activeOverlays take precedence over the provided loading overlay.
- activeOverlay can be displayed no matter what the grid state, i.e showing the no-rows overlay even when there are rows.
- StatusOverlay is registered in the components map and shown by setting
activateOverlay = "statusOverlay"to the key used.
import { Component, computed, model, signal } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { AgGridAngular } from "ag-grid-angular";
import type { IOverlayAngularComp } from "ag-grid-angular";
import type { ColDef } from "ag-grid-community";
import {
ClientSideRowModelModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import type { IOverlayParams } from "ag-grid-community";
import "./styles.css";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule]);
@Component({
standalone: true,
template: `<div class="status-overlay">Custom</div>`,
})
export class StatusOverlayComponent implements IOverlayAngularComp {
agInit(params: IOverlayParams): void {
console.log("init");
}
}
interface Athlete {
athlete: string;
country: string;
}
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular, FormsModule],
template: `<div class="example-wrapper">
<div class="button-row">
<label class="toggle loading-toggle"
><input
type="checkbox"
[checked]="loadingToggle()"
(change)="loadingToggle.set(!loadingToggle())"
/>
Loading</label
>
<button type="button" (click)="showNoRowsOverlay()">
activeOverlay = agNoRowsOverlay
</button>
<button type="button" (click)="showCustomOverlay()">
activeOverlay = CustomOverlay
</button>
<button type="button" (click)="clearOverlay()">Hide activeOverlay</button>
</div>
<div class="grid-wrapper">
<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[rowData]="rowData"
[components]="components"
[loading]="loading()"
[activeOverlay]="activeOverlay()"
/>
</div>
</div>`,
})
export class AppComponent {
public readonly columnDefs: ColDef<Athlete>[] = [
{ field: "athlete", flex: 1 },
{ field: "country", flex: 1 },
];
public readonly rowData: Athlete[] = [
{ athlete: "Michael Phelps", country: "United States" },
{ athlete: "Natalie Coughlin", country: "United States" },
];
public readonly components = { statusOverlay: StatusOverlayComponent };
public readonly activeOverlay = signal<string | undefined>(undefined);
public readonly loadingToggle = signal<boolean>(false);
public readonly loading = computed(() => this.loadingToggle());
public showNoRowsOverlay(): void {
this.activeOverlay.set("agNoRowsOverlay");
}
public showCustomOverlay(): void {
this.activeOverlay.set("statusOverlay");
}
public clearOverlay(): void {
this.activeOverlay.set(undefined);
}
}