Angular Data Grid: Loading Cell Renderer

Loading cell renderers allow you to add your own loading renderers to AG Grid. Use these when the provided loading renderers do not meet your requirements.

Simple Loading Cell Renderer Component

Below is a simple example of loading cell renderer component:

import {Component} from '@angular/core';
import {ILoadingCellRendererAngularComp} from "@ag-grid-community/angular";
import {ILoadingCellRendererParams} from "@ag-grid-community/core";

@Component({
   selector: 'app-loading-cell-renderer',
   template: `
     <div class="ag-custom-loading-cell" style="padding-left: 10px; line-height: 25px;">
       <i class="fas fa-spinner fa-pulse"></i>
       <span> {{ this.params.loadingMessage }} </span>
     </div>
   `
})
export class CustomLoadingCellRenderer implements ILoadingCellRendererAngularComp {
   private params: any;

   agInit(params: ILoadingCellRendererParams): void {
       this.params = params;
   }
}

Example: Custom Loading Cell Renderer

The example below demonstrates how to provide custom loading cell renderer component to the grid. Notice the following:

Custom Loading Cell Renderer is supplied by name via gridOptions.loadingCellRenderer.
Custom Loading Cell Renderer Parameters are supplied using gridOptions.loadingCellRendererParams.

Example: Custom Loading Cell Renderer

Loading Cell Renderer Component

Any valid Angular component can be a Loading Cell Renderer Component.

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

interface ILoadingCellRendererParams {
    // an optional template for the loading cell renderer
    loadingMessage?: string

    // The grid API
    api: GridApi;
}

Registering Loading Cell Renderer Components

See the section registering custom components for details on registering and using custom loading cell renderers.