The ListView control supports wrapping list items into a group based on the category. The category of each list item can be mapped with groupBy field of the data source. You can display grouped list items count in the list-header using the group header template. Refer to the following code sample to display grouped list item count.
import { ListView } from '@syncfusion/ej2-lists';
let template: string = '<div class="e-list-wrapper e-list-multi-line e-list-avatar">' +
'<img class="e-avatar e-avatar-circle" src=${image} style="background:#BCBCBC" />' +
'<span class="e-list-item-header">${Name}</span>' +
'<span class="e-list-content">${contact}</span>' +
'</div>';
//Define an array of JSON data
let dataSource: { [key: string]: string }[] = [
{ Name: 'Nancy', contact: '(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.png', category: 'Experience' },
{ Name: 'Janet', contact: '(206) 555-3412', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
{ Name: 'Margaret', contact: '(206) 555-8122', id: '4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
{ Name: 'Andrew ', contact: '(206) 555-9482', 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: '(206) 555-1189', id: '9', image: 'https://ej2.syncfusion.com/demos/src/grid/images/8.png', category: 'Experience' },
];
// Initialize the ListView control
let listObj: ListView = new ListView({
//Set the defined data to the data source property
dataSource: dataSource,
//Map the appropriate columns to the fields property
fields: { text: 'Name', groupBy: 'category' },
//set cssClass for template customization
cssClass: 'e-list-template',
//Set the customized template
template: template,
groupTemplate: '<div><span class="category">${items[0].category}</span> <span class="count"> ${items.length} Item(s)</span></div> '
});
//Render the initialized ListView control
listObj.appendTo('#List');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for ListView </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for ListView UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div class="col-lg-12 control-section">
<!-- ListView element -->
<div id="List" tabindex="1">
</div>
</div>
</div>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#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;
}