# Angular TreeList Aggregates

The aggregates help you easily perform various mathematical operations with the column values at each level of the hierarchy. Aggregates are commonly displayed inside the [footer](https://www.telerik.com/kendo-angular-ui/components/treelist/api/footertemplatedirective) of the column.

You can enable the aggregates feature by using two methods:

* [Automatic Data Processing](https://www.telerik.com/kendo-angular-ui/components/treelist/aggregates#automatic-data-processing)—Uses the built-in binding directives to calculate aggregates automatically with less code.
* [Manual Aggregation](https://www.telerik.com/kendo-angular-ui/components/treelist/aggregates#manual-aggregation)—Provides more control when implementing the aggregates feature.

## Automatic Data Processing

When you use the built-in binding directives for flat and hierarchical data, the TreeList calculates the aggregates automatically for you.

> Further details on how the data binding directives work under the hood are available in the [data operations with the built-in directives](https://www.telerik.com/kendo-angular-ui/components/treelist/data-operations#automatic-data-processing) documentation section.

To calculate and visualize aggregates:

1. Provide the collection to the built-in [`kendoTreeListFlatBinding`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/flatbindingdirective) or [`kendoTreeListHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/hierarchybindingdirective) directive depending on your data type.

2. Create an array of [`AggregateDescriptor`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/aggregatedescriptor) objects that define aggregates for the required fields.

   ```ts
   public myAggregates: AggregateDescriptor[] = [
       { field: 'name', aggregate: 'count' },
       { field: 'yearsExperience', aggregate: 'max' },
   ];
   ```

3. Set the [`aggregate`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/flatbindingdirective#aggregate) property to the collection of `AggregateDescriptor` objects.

   ```html
   <kendo-treelist
       [kendoTreeListFlatBinding]="data"
       [aggregate]="myAggregates"
       ...
   >
       ...
   </kendo-treelist>
   ```

4. Use the `aggregates` field passed by each template to access and display the predefined aggregates from step 2.

   ```html
   <kendo-treelist-column field="name">
       <ng-template kendoTreeListFooterTemplate let-aggregates="aggregates">
           Count: {{ aggregates.name.count }}
       </ng-template>
   </kendo-treelist-column>
   ```

The following example demonstrates how to aggregate the data by the `name` and `yearsExperience` fields.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/aggregates/flat/source.txt)

## Manual Aggregation

The manual aggregation gives the developer more control over the calculation of the data aggregates. Compared to the [automatic data processing](https://www.telerik.com/kendo-angular-ui/components/treelist/aggregates#automatic-data-processing), the manual approach provides greater transparency of the process because it requires to manually aggregate the TreeList data.

To manually calculate and visualize aggregates when using custom binding:

1. Provide the collection to the built-in [`data`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#data) property.

2. Create an array of [`AggregateDescriptor`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/aggregatedescriptor) objects that define aggregates for the required fields.

   ```ts
   public myAggregates: AggregateDescriptor[] = [
       { field: 'name', aggregate: 'count' },
       { field: 'yearsExperience', aggregate: 'max' },
   ];
   ```

3. Implement a function that calculates the predefined aggregates by utilizing the built-in [`aggregateBy()`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/aggregateby) method.

   ```ts
   private calculateAggregates(items: MedicalNode[]): AggregateResult {
       const all: MedicalNode[] = [];
       let queue = [...items];

       while (queue.length) {
           const current = queue.shift()!;
           all.push(current);
           // Queue descendants to include the entire subtree in the aggregate.
           queue = queue.concat(medicalStaff.filter(n => n.parentId === current.id));
       }

       return aggregateBy(all, this.myAggregates);
   }
   ```

4. Use the function that calculates the aggregates to fetch the TreeList data.

   ```ts
   public fetchChildren = (item?: MedicalNode): any => {
       const parentId = item ? item.id : null;
       const children = medicalStaff.filter(n => n.parentId === parentId);

       // Pair the child data with its aggregate result for footer rendering.
       return {
           data: children,
           aggregates: this.calculateAggregates(children),
       };
   };
   ```

The following example demonstrates how to display the aggregate values in the footer with custom binding.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/aggregates/source.txt)

## Aggregate Types

The TreeList supports the following aggregate types:

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

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/aggregates/aggregate-types/source.txt)

## Suggested Links

* [Overview of Data Query](https://www.telerik.com/kendo-angular-ui/components/data-query)
* [API Reference of the `AggregateDescriptor`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/aggregatedescriptor)
* [API Reference of the `kendoTreeListFlatBinding` Directive](https://www.telerik.com/kendo-angular-ui/components/treelist/api/flatbindingdirective)
* [API Reference of the `kendoTreeListHierarchyBinding` Directive](https://www.telerik.com/kendo-angular-ui/components/treelist/api/hierarchybindingdirective)
* [API Reference of the TreeList Component](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent)
* [API Index of the TreeList](https://www.telerik.com/kendo-angular-ui/components/treelist/api)