Footer aggregate in Angular TreeGrid component

26 Aug 20256 minutes to read

Footer aggregate values are calculated for all rows and displayed in the footer cells of the TreeGrid. Use the footerTemplate property to render aggregate values in footer cells.

app.component.ts

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]='false'>
            <e-columns>
                <e-column field="UnitWeight" type="Max" columnName='UnitWeight'>
                    <ng-template #footerTemplate let-data>Maximum: </ng-template>
                </e-column>
                 <e-column field="TotalUnits" type="Min" columnName='TotalUnits'>
                    <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;
    }
}

main.ts

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

Access aggregate values inside the template by referring to the corresponding type property name, such as Sum, Average, etc.
Obtain the footer content element programmatically using the getFooterContent method of the TreeGrid instance.
Retrieve the footer content table element using the getFooterContentTable method.

How to format aggregate value

Format the aggregate value result by using the format property. The format property can be set to standard numeric or date formats according to your requirements.

app.component.ts

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 { summaryData } from './datasource';

@Component({
imports: [
        
        TreeGridModule
    ],

providers: [AggregateService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' height='260' width='auto' [treeColumnIndex]='0'  childMapping='subtasks' >
        <e-columns>
                   <e-column field='category' headerText='Category'  width=130></e-column>
                   <e-column field='units' headerText='Total Units'  textAlign='Right' type='number' Width=130></e-column>
                   <e-column field='unitPrice' headerText='Unit Price($)' format='C2' textAlign='Right' type='number' width=110 ></e-column>
                   <e-column field='price' headerText='Price($)' textAlign='Right' type='number' width=160 ></e-column>
        </e-columns>
        <e-aggregates >
        <e-aggregate >
            <e-columns>
                <e-column field="price" format='C2' type="Sum" customAggregate='customAggregateFn'>
                    <ng-template #footerTemplate let-data>Total: </ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];

    ngOnInit(): void {
        this.data = summaryData;
    }
}

main.ts

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