Footer Aggregate in Angular Data Grid

26 Aug 202611 minutes to read

The Angular Data Grid supports calculating and displaying aggregate values in the footer cells. These footer aggregates are computed from all rows in the grid. The footerTemplate property can be used to customize the rendering of aggregate values in the footer cells, allowing formatted text or custom layouts to be displayed.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { AggregateService, GridModule } from '@syncfusion/ej2-angular-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;
    }
}
<ejs-grid [dataSource]='data' height='210px'>
    <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' width=150></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Sum">
                    <ng-template #footerTemplate let-data>Sum: {{data.Sum}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Max">
                    <ng-template #footerTemplate let-data>Max: {{data.Max}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • Ensure the AggregateService is injected into the component’s providers array to enable aggregate functionality.
  • Inside the template, access each aggregate value using its type name. For example, use data.Sum to access the sum aggregate and data.Max to access the maximum aggregate.

Format aggregate values

Aggregate values displayed in footer cells can be formatted using the format property of the AggregateColumnDirective. This property accepts a format string that defines the appearance of the aggregate value, such as currency, number of decimal places, or percentage format.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { AggregateService, GridModule } from '@syncfusion/ej2-angular-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;
    }
}
<ejs-grid [dataSource]="data" height="210px">
    <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" width="150"></e-column>
        <e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Sum" format="N0">
                    <ng-template #footerTemplate let-data>Sum: {{ data.Sum }}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Max" format="N0">
                    <ng-template #footerTemplate let-data>Max: {{ data.Max }}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Display aggregates in the header

By default, aggregate values are displayed in the footer section of the Data Grid. To display these values in the header section instead, handle the dataBound event and use the getHeaderContent and getFooterContent methods. The footer content is then appended to the header after the Data Grid is rendered.

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

@Component({
imports: [GridModule],
providers: [AggregateService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='210px' (dataBound)="dataBound()">
    <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' width=150></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
    </e-columns>
    <e-aggregates>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Sum">
                    <ng-template #footerTemplate let-data>Sum: {{data.Sum}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
        <e-aggregate>
            <e-columns>
                <e-column field="Freight" type="Max">
                    <ng-template #footerTemplate let-data>Max: {{data.Max}}</ng-template>
                </e-column>
            </e-columns>
        </e-aggregate>
    </e-aggregates>
</ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid!: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }
    dataBound() {
        (this.grid as GridComponent).getHeaderContent().append((this.grid as GridComponent).getFooterContent());
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also