Grouping in Angular ListView component

12 Sep 20253 minutes to read

The ListView component supports organizing items into groups based on categories. Each list item’s category can be mapped using the groupBy field in the data source, enabling single-level navigation within grouped content.

In the sample below, cars are grouped based on their category using the groupBy field.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component } from '@angular/core';

@Component({
    imports: [
        ListViewModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `<ejs-listview id='sample-list' [dataSource]='data' [fields]='fields' ></ejs-listview>`
})

export class AppComponent {
    public data: Object = [
        {
            'text': 'Audi A4',
            'id': '9bdb',
            'category': 'Audi'
        },
        {
            'text': 'Audi A5',
            'id': '4589',
            'category': 'Audi'
        },
        {
            'text': 'BMW 501',
            'id': 'f849',
            'category': 'BMW'
        },
        {
            'text': 'BMW 502',
            'id': '7aff',
            'category': 'BMW'
        }
    ];
    public fields: Object = { groupBy: 'category', tooltip: 'text' };
}

main.ts

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

Customization

The grouping header can be customized using the groupTemplate property. This property allows you to define custom templates for group headers in both inline and fixed header scenarios. The groupTemplate accepts string or function templates to render custom content, enabling you to add icons, styling, or additional information to group headers based on your application requirements.