New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid Aggregates

Updated on Oct 31, 2025

The aggregates in the Angular Grid help you to easily perform various mathematic operations with the values of grouped columns. Aggregates are commonly displayed inside Group Templates.

The following example demonstrates how to aggregate the data by the Amount field.

Change Theme

Theme

Loading ...

To apply aggregates by specific fields:

Create an array of AggregateDescriptor objects that define aggregates for the required fields.

public myAggregates: AggregateDescriptor[] = [
    { field: 'Amount', aggregate: 'sum' }
];

Set the created aggregates array to the aggregates property of the GroupDescriptor for the respective field.

public group: GroupDescriptor[] = [
    { field: 'transactionType', aggregates: this.myAggregates }
];

By design, the aggregates are not persisted, and you must apply them manually. Make sure to update the aggregates property of the GroupDescriptor in the groupChange or dataStateChange event handler.

onGroupChange(group) {
    // set the desired aggregates to the incoming GroupDescriptor
    group.map((group) => (group.aggregates = this.aggregates));

    this.group = group;
    this.gridData = groupBy(sampleProducts, this.group);
}

Use the aggregates field passed by each template to access and display the created aggregates from step 1.

html

<kendo-grid [group]="group"...>
    <kendo-grid-column field="amount">
        <ng-template kendoGridGroupFooterTemplate  let-aggregates="aggregates">
                <span>
                    Sum: {{aggregates.amount.sum}}
                </span>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

Aggregate Types

The Grid supports the following aggregate functions for mathematical calculations on grouped data:

sum—Calculates the total of all numeric values in the group
average—Calculates the average of all numeric values in the group
count—Returns the number of items in the group
min—Finds the smallest value in the group
max—Finds the largest value in the group

The following example demonstrates how to calculate several aggregates and display them in the footer template.

Change Theme

Theme

Loading ...

Angular Data Grid Aggregates

Aggregate Types

Suggested Links