Add custom aggregation type to the menu in Angular Pivotview component

23 Aug 20256 minutes to read

The Angular Pivotview component allows you to extend its functionality by adding custom aggregation types to the built-in aggregation menu. This feature enables you to implement specific calculation methods beyond the standard options like Sum, Average, Min, and Max.

Adding custom aggregation types

By using the dataBound event, you can add your own custom aggregate type(s) to the pivot table’s aggregate menu. The dataBound event triggers after the pivot table is completely rendered, making it the ideal place to modify the component’s UI elements.

In the following example, we have added two custom aggregation types CustomAggregateType 1 (which calculates a weighted average) and CustomAggregateType 2 (which calculates the percentage of total) to the aggregate menu.

The calculation logic for these custom aggregation types is implemented using the aggregateCellInfo event. This event provides parameters including:

• fieldName - It holds current cell’s field name.
• row - It holds current cell’s row value.
• column - It holds current cell’s column value.
• value - It holds value of current cell.
• cellSets - It holds raw data for the aggregated value cell.
• rowCellType - It holds row cell type value.
• columnCellType - It holds column cell type value.
• aggregateType - It holds aggregate type of the cell.
• skipFormatting - boolean property, it allows to skip formatting if applied.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'

import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotView, FieldListService, IDataSet, AggregateTypes } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource';
import { L10n } from '@syncfusion/ej2-base';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

let SummaryType: string[] = [
    'Sum',
    'Count',
    'DistinctCount',
    'Avg',
    'CustomAggregateType1',
    'CustomAggregateType2',

];

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    providers: [FieldListService],
    template: `<div class="col-md-8"> <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [width]=width height=height 
   (aggregateCellInfo)='aggregateCellInfo($event)' showFieldList='true' (dataBound)="dataBound($event)"></ejs-pivotview></div>`
})
export class AppComponent implements OnInit {

    public width?: string;
    public height?: number;
    public dataSourceSettings?: DataSourceSettingsModel;

    @ViewChild('pivotview', { static: false })
    public pivotGridObj: any;

    aggregateCellInfo(args: any) {
        if (args.aggregateType === 'CustomAggregateType1') {
            args.value = args.value * 100;
        }
        if (args.aggregateType === 'CustomAggregateType2') {
            args.value = args.value / 100;
        }
    }

    dataBound(args: any): void {
        this.pivotGridObj.getAllSummaryType = function () {
            return SummaryType as AggregateTypes[];
        };
        this.pivotGridObj.pivotFieldListModule.aggregateTypes = SummaryType as AggregateTypes[];
        this.pivotGridObj.pivotFieldListModule.getAllSummaryType = function () {
            return SummaryType as AggregateTypes[];
        };
    }

    ngOnInit(): void {

        L10n.load({
            'en-US': {
                pivotview: {
                    CustomAggregateType1: 'Custom Aggregate Type 1',
                    CustomAggregateType2: 'Custom Aggregate Type 2',
                },
                pivotfieldlist: {
                    CustomAggregateType1: 'Custom Aggregate Type 1',
                    CustomAggregateType2: 'Custom Aggregate Type 2',
                }
            }
        });

        this.width = "100%";
        this.height = 350;

        this.dataSourceSettings = {
            expandAll: false,
            dataSource: Pivot_Data as IDataSet[],
            columns: [{ name: 'Year' }, { name: 'Quarter' }],
            values: [{ name: 'Sold' }, { name: 'Amount' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));