Footer aggregate in Angular Treegrid component

9 Jan 20236 minutes to read

Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use the footerTemplate property to render the aggregate value in footer cells.

app.component.ts

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

@Component({
    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;
    }
}

app.module.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 { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [AggregateService ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

The aggregate values must be accessed inside the template using their corresponding type name.
Get the footer content element by using getFooterContent method in the tree grid.
Get the footer content table element by using getFooterContenTable method in the tree grid.

How to format aggregate value

You can format the aggregate value result by using the format property.

app.component.ts

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

@Component({
    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;
    }
}

app.module.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 { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [AggregateService ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);