Aggregates in Angular TreeGrid component

25 Aug 20254 minutes to read

Aggregate values are displayed in the TreeGrid footer as well as in the parent row footer for child row aggregate values. Aggregates are configured using the aggregates property. The field and type properties are required to define an aggregate column.

To use aggregate features in the TreeGrid, inject the Aggregate module.

By default, aggregate values appear in the TreeGrid footer and as child summary rows at the end of each parent’s child rows. To display an aggregate value within a specific cell, use the footerTemplate property.

You can also watch this video to learn how to use Aggregates in the Angular TreeGrid.

Built-in aggregate types

Specify the aggregate type in the type property to configure an aggregate column.

The available built-in aggregate types are:

  • Sum
  • Average
  • Min
  • Max
  • Count
  • Truecount – Counts the number of true values in a column
  • Falsecount – Counts the number of false values in a column
  • You can use multiple aggregates for a single aggregate column by setting the type property to an array of aggregate types.
  • Using multiple types for a column is supported only when at least one aggregate template property (such as footerTemplate) is defined.

Child aggregate

Aggregate values can be calculated for child rows and displayed in the parent row footer. Set the childSummary property to display child row aggregate values in their respective parent row. The childSummary property provides options for customizing how child aggregates appear within hierarchical data.

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { AggregateService  } from '@syncfusion/ej2-angular-treegrid'



import { Component, OnInit } from '@angular/core';
import { summaryRowData } from './datasource';

@Component({
imports: [
        
        TreeGridModule
    ],

providers: [AggregateService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' height='240' [treeColumnIndex]='0'  childMapping='children' >
        <e-columns>
                   <e-column field='FreightID' headerText='Freight ID'  width=130></e-column>
                   <e-column field='FreightName' headerText='Freight Name'  width=195></e-column>
                   <e-column field='UnitWeight' headerText='Weight Per Unit' textAlign='Right' type='number' width=130></e-column>
                   <e-column field='TotalUnits' headerText='Total Units' textAlign='Right' type='number' width=125></e-column>
        </e-columns>
        <e-aggregates>
        <e-aggregate [showChildSummary]='true'>
            <e-columns>
                <e-column field="UnitWeight" type="Max">
                    <ng-template #footerTemplate let-data>Maximum: </ng-template>
                </e-column>
                <e-column field="TotalUnits" type="Min">
                    <ng-template #footerTemplate let-data>Minimum: </ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];

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

For more on TreeGrid’s groundbreaking features, refer to the Angular TreeGrid feature tour. For sample demonstrations, explore the Angular TreeGrid example to see data presentation and manipulation in action.