Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

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 an example of loading cell renderer component that is passed a custom loadingMessage:

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> {{ params.loadingMessage }} </span>
     </div>
   `
})
export class CustomLoadingCellRenderer implements ILoadingCellRendererAngularComp {
   public params: ILoadingCellRendererParams & { loadingMessage: string };

   agInit(params: ILoadingCellRendererParams & { loadingMessage: string }): 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.

Loading Cell Renderer Component

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

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:

ILoadingCellRendererParams

Properties available on the ILoadingCellRendererParams interface.

node
The row node.
api
The grid api.
columnApi
The column api.
context
any
Application context as set on gridOptions.context.

Dynamic Cell Loading Renderer

It's possible to determine what Loading Cell Renderer to use dynamically - i.e. at runtime. For this you'll make use of the

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;
       }
   }
}

Registering Loading Cell Renderer Components

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