---
title: "Overlays (legacy)"
framework: angular
version: "36.1.0"
---

# Overlays (legacy)

Overlays are used for displaying messages over the top of the grid. There are two built-in overlays: loading and no-rows.

> **Warning**
>
> This page documents the legacy approach to handling overlays. For the latest documentation, see [Overlays Overview](https://www.ag-grid.com/angular-data-grid/overlays-overview/).

## Loading overlay

Show or hide the loading overlay by setting the `loading` property to `true` or `false`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `loading` | `boolean` |  | `undefined` | Show or hide the loading overlay. - `true`: the loading overlay is shown. - `false`: the loading overlay is hidden. - `undefined`: the grid will automatically show the loading overlay until `rowData` and `columnDefs` are provided. (Client Side Row Model only) |

The loading overlay takes precedence over the no-rows overlay and is not dependent of the state of `rowData`.

#### Loading overlay

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

interface IAthlete {
  athlete: string;
  country: string;
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="example-wrapper">
    <div>
      <label class="checkbox">
        <input
          type="checkbox"
          checked=""
          (change)="setLoading($event.currentTarget.checked)"
        />
        loading
      </label>

      <button (click)="onBtnClearRowData()">Clear rowData</button>
      <button (click)="onBtnSetRowData()">Set rowData</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [loading]="true"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IAthlete>;

  columnDefs: ColDef[] = [{ field: "athlete" }, { field: "country" }];
  rowData!: IAthlete[];

  setLoading(value: boolean) {
    this.gridApi.setGridOption("loading", value);
  }

  onBtnClearRowData() {
    this.gridApi.setGridOption("rowData", []);
  }

  onBtnSetRowData() {
    this.gridApi.setGridOption("rowData", [
      { athlete: "Michael Phelps", country: "US" },
    ]);
  }

  onGridReady(params: GridReadyEvent<IAthlete>) {
    this.gridApi = params.api;
  }
}
```

[Live example: Loading overlay](https://www.ag-grid.com/examples/overlays/loading-overlay/angular)

## No rows overlay

When `rowData` is set to an empty array `[]`, the grid automatically displays the no-rows overlay. The no-rows overlay can also be programmatically shown / hidden via the grid API.

> **Warning**
>
> It is recommended to use the [Active Overlay](https://www.ag-grid.com/angular-data-grid/overlays-active/) to manually display an overlay.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `showNoRowsOverlay` | `Function` |  |  | Show the no-rows overlay. If `loading` is true, this will not do anything. - **Prefer `setGridOption('activeOverlay', 'agNoRowsOverlay')` .** |
| `hideOverlay` | `Function` |  |  | Hide the no-rows overlay if it is showing. - **Prefer `setGridOption('activeOverlay', undefined)` .** |

The automatic displaying of the no-rows overlay can be suppressed by setting `suppressNoRowsOverlay` to `true`.

#### No Rows Overlay

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

interface IAthlete {
  athlete: string;
  country: string;
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="example-wrapper">
    <div>
      <button (click)="onBtnClearRowData()">Clear rowData</button>
      <button (click)="onBtnSetRowData()">Set rowData</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IAthlete>;

  rowData: IAthlete[] | null = [];
  columnDefs: ColDef[] = [{ field: "athlete" }, { field: "country" }];

  onBtnClearRowData() {
    this.gridApi.setGridOption("rowData", []);
  }

  onBtnSetRowData() {
    this.gridApi.setGridOption("rowData", [
      { athlete: "Michael Phelps", country: "US" },
    ]);
  }

  onGridReady(params: GridReadyEvent<IAthlete>) {
    this.gridApi = params.api;
  }
}
```

[Live example: No Rows Overlay](https://www.ag-grid.com/examples/overlays/no-rows-overlay/angular)

## Initial loading overlay

If `loading` is not explicitly defined, the grid will automatically show the loading overlay until both `rowData` and `columnDefs` are provided with a non-null value for the first time. This behaviour can be suppressed by initialising the grid with an appropriate `loading` state.

## Customisation

Overlays can be customised by providing either a HTML string or custom component via grid properties.

### Custom Loading Overlay

The loading overlay can be customised via the grid properties `overlayLoadingTemplate` or `loadingOverlayComponent` and `loadingOverlayComponentParams`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `overlayLoadingTemplate` | `string` |  |  | Provide a HTML string to override the default loading overlay. Supports non-empty plain text or HTML with a single root element. - **Prefer `overlayComponent` / `overlayComponentSelector`** |
| `loadingOverlayComponent` | `any` |  |  | Provide a custom loading overlay component. - **Prefer `overlayComponent` / `overlayComponentSelector`** |
| `loadingOverlayComponentParams` | `any` |  |  | Customise the parameters provided to the loading overlay component. - **Prefer using `overlayComponentParams`** |

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

```ts

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

  // Gets called when the `overlayComponentParams` grid option is updated
  refresh?(params: TParams): void;

}
```

This example demonstrates how to provide a custom loading overlay component customised via parameters.

#### Custom Loading Overlay Components

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  ClientSideRowModelModule,
]);
import { CustomLoadingOverlay } from "./custom-loading-overlay.component";

interface IAthlete {
  athlete: string;
  country: string;
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, CustomLoadingOverlay],
  template: `<div class="example-wrapper">
    <div>
      <label class="checkbox">
        <input
          type="checkbox"
          checked=""
          (change)="setLoading($event.currentTarget.checked)"
        />
        loading
      </label>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      [defaultColDef]="defaultColDef"
      [loading]="true"
      [loadingOverlayComponent]="loadingOverlayComponent"
      [loadingOverlayComponentParams]="loadingOverlayComponentParams"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IAthlete>;

  columnDefs: ColDef[] = [
    { field: "athlete", width: 150 },
    { field: "country", width: 120 },
  ];
  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" },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  loadingOverlayComponent: any = CustomLoadingOverlay;
  loadingOverlayComponentParams: any = {
    loadingMessage: "One moment please...",
  };

  setLoading(value: boolean) {
    this.gridApi.setGridOption("loading", value);
  }

  onGridReady(params: GridReadyEvent<IAthlete>) {
    this.gridApi = params.api;
  }
}
```

[Live example: Custom Loading Overlay Components](https://www.ag-grid.com/examples/overlays/custom-overlay-loading/angular)

### Custom No Rows Overlay

The no-rows overlay can be customised via the grid properties `overlayNoRowsTemplate` or `noRowsOverlayComponent` and `noRowsOverlayComponentParams`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `overlayNoRowsTemplate` | `string` |  |  | Provide a HTML string to override the default no-rows overlay. Supports non-empty plain text or HTML with a single root element. - **Prefer `overlayComponent` / `overlayComponentSelector`** |
| `noRowsOverlayComponent` | `any` |  |  | Provide a custom no-rows overlay component. - **Prefer `overlayComponent` / `overlayComponentSelector`** |
| `noRowsOverlayComponentParams` | `any` |  |  | Customise the parameters provided to the no-rows overlay component. - **Prefer using `overlayComponentParams`** |

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

```ts

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

  // Gets called when the `overlayComponentParams` grid option is updated
  refresh?(params: TParams): void;

}
```

This example demonstrates how to provide a custom no-rows overlay component customised via parameters.

#### Custom No Rows Overlay Components

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  ClientSideRowModelModule,
]);
import { CustomNoRowsOverlay } from "./custom-no-rows-overlay.component";

interface IAthlete {
  athlete: string;
  country: string;
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, CustomNoRowsOverlay],
  template: `<div class="example-wrapper">
    <div>
      <button (click)="onBtnClearRowData()">Clear rowData</button>
      <button (click)="onBtnSetRowData()">Set rowData</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [noRowsOverlayComponent]="noRowsOverlayComponent"
      [noRowsOverlayComponentParams]="noRowsOverlayComponentParams"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IAthlete>;

  columnDefs: ColDef[] = [
    { field: "athlete", width: 150 },
    { field: "country", width: 120 },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  rowData: IAthlete[] | null = [];
  noRowsOverlayComponent: any = CustomNoRowsOverlay;
  noRowsOverlayComponentParams: any = {
    noRowsMessageFunc: () =>
      "No rows found at: " + new Date().toLocaleTimeString(),
  };

  onBtnClearRowData() {
    this.gridApi.setGridOption("rowData", []);
  }

  onBtnSetRowData() {
    this.gridApi.setGridOption("rowData", [
      { athlete: "Michael Phelps", country: "US" },
    ]);
  }

  onGridReady(params: GridReadyEvent<IAthlete>) {
    this.gridApi = params.api;
  }
}
```

[Live example: Custom No Rows Overlay Components](https://www.ag-grid.com/examples/overlays/custom-overlay-no-rows/angular)