List items count in group header in Angular ListView component

12 Sep 20254 minutes to read

The ListView component enables grouping of list items based on a specified category. Each item’s category can be mapped using the groupBy field in the data source. To display the count of items within each group, use the groupTemplate property to customize the group header. The group header template allows you to show both the group name and the number of items in that group, providing a clearer overview for users.

Refer to the following code sample to display the count of grouped list items in the group header.

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='List' [dataSource]='dataSource' cssClass='e-list-template' [fields]='fields'>
      <ng-template #template let-dataSource="">
        <div class="e-list-wrapper e-list-multi-line e-list-avatar">
            <img class="e-avatar e-avatar-circle" src= style="background:#BCBCBC" />
            <span class="e-list-item-header"></span>
            <span class="e-list-content"></span>
        </div>
      </ng-template>
       <ng-template #groupTemplate let-dataSource="">
        <div>
          <span className="category"></span
          ><span id="count">  Item(s)</span>
        </div>
      </ng-template>
  </ejs-listview>`
})

export class AppComponent {
  public dataSource: Object = [
    { Name: 'Nancy', contact: '(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.png', category: 'Experience' },
    { Name: 'Janet', contact: '[phone]', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
    { Name: 'Margaret', contact: '[phone]', id: '4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
    { Name: 'Andrew ', contact: '[phone]', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience' },
    { Name: 'Steven', contact: '(71) 555-4848', id: '6', image: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', category: 'Fresher' },
    { Name: 'Michael', contact: '(71) 555-7773', id: '7', image: 'https://ej2.syncfusion.com/demos/src/grid/images/6.png', category: 'Experience' },
    { Name: 'Robert', contact: '(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' },
    { Name: 'Laura', contact: '[phone]', id: '9', image: 'https://ej2.syncfusion.com/demos/src/grid/images/8.png', category: 'Experience' },
  ];

  public fields: Object = { text: 'Name', groupBy: 'category' };
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

#List {
    display: block;
    margin: auto;
    font-size: 15px;
    border: 1px solid;
    border-color: #ccc;
    border-color: #0000001f;
    width: 350px;
}

#List .e-list-group-item {
    height: 56px;
    line-height: 56px;
}

#List .count {
    float: right;
}

#count {
    position: relative;
    left: 100px;
}

main.ts

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