##### Getting Started

Setup

Tutorials

Compatibility & Security

* * *

##### AI Features

* * *

##### Layout & Styling

Theming

[Design System](/content/angular-data-grid/ag-grid-design-system/index.html) [Grid Layout](/content/angular-data-grid/grid-size/index.html)

* * *

##### Charting

Sparklines

[Integrated Charts](/content/angular-data-grid/integrated-charts/index.html)

[Standalone Charts](/content/charts/index.html)

* * *

##### Core Features

Columns

Rows

Cells

Filtering

Selection

Editing

Updating Data

Interactivity

* * *

##### Advanced Features

Row Grouping

Aggregation

Pivoting

Tree Data

Master Detail

Accessories

Server-Side Data

Import & Export

State & Lifecycle

Performance

The Loading Component is displayed for a row to show data is loading.

## Full Width Loading Row [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#full-width-loading-row/index.html)

The example below demonstrates replacing the Provided Loading Component with a Custom Loading Component.

- **Custom Loading Component** is supplied by name via `gridOptions.loadingCellRenderer`.
- **Custom Loading Component Parameters** are supplied using `gridOptions.loadingCellRendererParams`.
- Example simulates a long delay to display the spinner clearly.
- Scrolling the grid will request more rows and again display the loading cell renderer.

Angular Example - Component Loading Cell Renderer - Custom Loading Cell Renderer

Example Error: Error: Failed to fetch
Instantiating https://www.ag-grid.com/examples/component-loading-cell-renderer/custom-loading-cell-renderer/angular/main.ts
Loading /examples/component-loading-cell-renderer/custom-loading-cell-renderer/angular/main.ts

Hide filesViewing: app.component.ts

- custom-loading-cell-renderer.component.ts
- main.ts
- app.component.ts
- interfaces.ts

```ts

```

Console

Clear

```
Console logs from the example shown here...
```

### Custom Loading Row [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#custom-loading-row/index.html)

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<TData = any, TValue = any, TContext = any>` interface.

|     |
| --- |
| node [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#reference-ILoadingCellRendererParams-node/index.html)<br>[IRowNode](/content/angular-data-grid/row-object/index.html)<br>The row node. |
| api [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#reference-ILoadingCellRendererParams-api/index.html)<br>[GridApi](/content/angular-data-grid/grid-api/index.html)<br>The grid api. |
| context [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#reference-ILoadingCellRendererParams-context/index.html)<br>[TContext](/content/angular-data-grid/typescript-generics/#context-tcontext/index.html)<br>Application context as set on `gridOptions.context`. |

### Failed Loading [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#failed-loading/index.html)

When using a Custom Loading Component, you can add handling for loading failures in the component directly.

In the example below, note that:

- **Custom Loading Component** is supplied by name via `gridOptions.loadingCellRenderer`.
- **Custom Loading Component Parameters** are supplied using `gridOptions.loadingCellRendererParams`.
- The example simulates a long delay to display the spinner clearly and simulates a loading failure.

Angular Example - Component Loading Cell Renderer - Custom Loading Cell Renderer Failed

Example Error: Error: Failed to fetch
Instantiating https://www.ag-grid.com/examples/component-loading-cell-renderer/custom-loading-cell-renderer-failed/angular/main.ts
Loading /examples/component-loading-cell-renderer/custom-loading-cell-renderer-failed/angular/main.ts

Hide filesViewing: app.component.ts

- custom-loading-cell-renderer.component.ts
- main.ts
- app.component.ts
- interfaces.ts

```ts

```

Console

Clear

```
Console logs from the example shown here...
```

### Dynamic Loading Row Selection [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#dynamic-loading-row-selection/index.html)

It's possible to determine what Loading Cell Renderer to use dynamically - i.e. at runtime. This requires providing a `loadingCellRendererSelector`.

```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 ---',
            },
        };
        } else {
            // no loading cell renderer
            return undefined;
        }
    }
}
```

## Skeleton Loading [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#skeleton-loading/index.html)

The grid can be configured to instead display loading indicators in cells, by enabling `suppressServerSideFullWidthLoadingRow`.

Angular Example - Component Loading Cell Renderer - Skeleton Loading Cell Renderer

Example Error: Error: Failed to fetch
Instantiating https://www.ag-grid.com/examples/component-loading-cell-renderer/skeleton-loading-cell-renderer/angular/main.ts
Loading /examples/component-loading-cell-renderer/skeleton-loading-cell-renderer/angular/main.ts

Hide filesViewing: app.component.ts

- main.ts
- app.component.ts
- interfaces.ts

```ts

```

Console

Clear

```
Console logs from the example shown here...
```

```ts
const gridOptions = {
    suppressServerSideFullWidthLoadingRow: true,
};
```

### Custom Loading Cells [Copy Link](/content/angular-data-grid/component-loading-cell-renderer/#custom-loading-cells/index.html)

The default grid behaviour can be overridden in order to provide renderers on a per-column basis.

Angular Example - Component Loading Cell Renderer - Custom Cell Loading Renderer

Example Error: Error: Failed to fetch
Instantiating https://www.ag-grid.com/examples/component-loading-cell-renderer/custom-cell-loading-renderer/angular/main.ts
Loading /examples/component-loading-cell-renderer/custom-cell-loading-renderer/angular/main.ts

Hide filesViewing: app.component.ts

- custom-loading-cell-renderer.component.ts
- main.ts
- app.component.ts
- interfaces.ts

```ts

```

Console

Clear

```
Console logs from the example shown here...
```

```ts
const gridOptions = {
    suppressServerSideFullWidthLoadingRow: true,
    columnDefs: [
        { field: 'athlete', loadingCellRenderer: CustomLoadingCellRenderer },
        // More columns, with no load renderer...
    ],
    defaultColDef: {
        loadingCellRenderer: () => '',
    },
};
```

The above example demonstrates the following:

- `suppressServerSideFullWidthLoadingRow` is enabled, preventing the grid from defaulting to full width loading.
- `loadingCellRenderer` is configured on the _Athlete_ column, allowing a loading spinner to be displayed for just this column.
- `loadingCellRenderer` is configured on the `defaultColDef` providing an empty cell renderer in order to prevent the default grid loading renderer from displaying on other columns.