---
product: "AG Grid"
title: "Loading Cell Component"
description: "Customise loading cells in the Client-Side and Server-Side Row Models."
framework: angular
version: "36.2.0"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Loading Cell Component

Use a custom Loading Cell Component to replace the grid's provided loading indicators. The same component interface is used for skeleton cells in the Client-Side and Server-Side Row Models, and for full-width loading rows in the Server-Side Row Model.

For configuration and examples, see the loading guide for your row model:

- [Loading Rows](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/loading-rows/) for the Client-Side Row Model.
- [Server-Side Row Model Loading Rows](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/server-side-model-loading-rows/) for datasource-driven loading.

## Registering a Loading Cell Component

Set `loadingCellRenderer` and `loadingCellRendererParams` on a column definition to customise its loading cells. Set them on `defaultColDef` to provide defaults for all columns. Individual column definitions take precedence over `defaultColDef`.

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: 'athlete',
        loadingCellRenderer: CustomLoadingCellRenderer,
        loadingCellRendererParams: {
            loadingMessage: 'Loading athlete...',
        },
    },
];
```

For Server-Side Row Model full-width loading rows, configure the component on the grid options.

Loading rows are placeholders: row data is not yet available. Custom loading components should not rely on `params.node.data` being defined.

## Component Interface

The interface for the loading cell renderer component is as follows:

```ts
interface ILoadingCellRendererAngularComp {

    // Mandatory - The agInit(params) method is called on the loading cell renderer once.
    agInit(params: ILoadingCellRendererParams): void;
}
```

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

Properties available on the `ILoadingCellRendererParams&lt;TData = any, TValue = any, TContext = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `node` | `IRowNode` |  |  |  |
| `api` | `GridApi` |  |  |  |
| `context` | `TContext` |  |  |  |

## Dynamic Loading Row Selection

Use `loadingCellRendererSelector` to choose a loading component at runtime. Return the component and any additional parameters, or `undefined` to fall back to the configured loading component.

```ts
loadingCellRendererSelector: (params) => {
    const useCustomRenderer = ...some condition/check...
    if (useCustomRenderer) {
        return {
            component: CustomLoadingCellRenderer,
            params: {
                // parameters to supply to the custom loading cell renderer
                loadingMessage: '--- CUSTOM LOADING MESSAGE ---',
            },
        };
    }
    // Use the configured loading cell renderer.
    return undefined;
}
```

## Full Width Loading Row

See [Full Width Loading Row](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/server-side-model-loading-rows/#full-width-loading-row) for the Server-Side Row Model example.

### Failed Loading

See [Failed Loading](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/server-side-model-loading-rows/#failed-loading) for handling datasource failures in a custom loading component.

## Skeleton Loading

See [Custom Loading Cells](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/loading-rows/#custom-loading-cells) for the Client-Side Row Model, or [Skeleton Loading](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/server-side-model-loading-rows/#skeleton-loading) for the Server-Side Row Model.