Custom aggregate in Angular Grid component

13 Sep 20258 minutes to read

The custom aggregate feature in the Syncfusion Angular Grid component enables calculation of summary values using defined functions. This is especially useful when built-in aggregate types do not meet specific calculation requirements. To configure a custom aggregate, follow the steps below:

Custom aggregate functions are invoked differently for total and group aggregations:

Total Aggregation: The custom aggregate function receives the entire dataset and the current aggregate column object as arguments.

Group Aggregation: The custom aggregate function is called with the current group details and the aggregate column object as arguments.

The key Custom in any aggregate template binds to the return value of the custom aggregate function.

The following example demonstrates use of the custom aggregate feature in the Angular Grid component:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { AggregateService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ReturnType } from '@syncfusion/ej2-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [AggregateService],
standalone: true,
    selector: 'app-root',
    templateUrl: 'app.template.html'
})

export class AppComponent implements OnInit {


    public data?: object[];
    ngOnInit(): void {
        this.data = data;
    }
    public customAggregateFn = (customData: ReturnType) => {
        return customData.result.filter((item: object) => (item as itemType)['ShipCountry'] === 'Brazil').length;
    }
}
interface itemType {
    OrderID: number;
    CustomerID: string;
    EmployeeID: number;
    OrderDate: Date;
    ShipName: string;
    ShipCountry: string;
}
<ejs-grid [dataSource]='data' height='268px'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='Freight' format='C2' width=150></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column columnName="ShipCountry" type="Custom" [customAggregate]="customAggregateFn">
                    <ng-template #footerTemplate let-data>Brazil Count: {{data.Custom}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

In footer, group footer, or caption templates, the custom aggregate value is accessed using the key Custom.

Counting distinct values using a custom aggregate

A custom aggregate function can be used to calculate the count of distinct values for a specified column. By setting the type property to Custom and providing a suitable function in the customAggregate property, distinct value counts can be displayed in aggregate rows.

The example below shows how to display the count of distinct values for the ShipCountry column using a custom aggregate function:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { AggregateService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { DataUtil } from '@syncfusion/ej2-data';

@Component({
imports: [
        
        GridModule
    ],

providers: [AggregateService],
standalone: true,
  selector: 'app-root',
  templateUrl: 'app.template.html',
})
export class AppComponent implements OnInit {
  @ViewChild('grid')
  public grid?: GridComponent;
  public data: object[] = [];
  ngOnInit(): void {
    this.data = data;
  }
  public customAggregateFn = () => {
    const distinct = DataUtil.distinct(this.data, 'ShipCountry', true);
    return distinct.length;
  };
}
<ejs-grid [dataSource]='data' height='268px'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='Freight' format='C2' width=150></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column columnName="ShipCountry" type="Custom" [customAggregate]="customAggregateFn">
                    <ng-template #footerTemplate let-data>Distinct Count: {{data.Custom}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The columnName property specifies the target column for displaying the aggregate value. If not defined, the field property value is used as the columnName.