Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the badges content dynamically. Click the increment button to change the badge value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Badge </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Badge 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-notifications/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-buttons/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 id='element'>
<div class="sample_container badge-list">
<!-- Listview element -->
<div id="lists"></div>
<p class='crossline'></p>
<span class='incr_button'>
<button class='e-btn e-primary' id='button'>Increment Badge Count</button>
</span>
</div>
</div>
</div>
</body>
</html>import { ListView } from '@syncfusion/ej2-lists';
let badgeElements: HTMLElement[];
// Datasource for listview, badge field is the class data for Badges
let dataSource: { [key: string]: Object }[] = [
{ id: 'p_01', text: 'Primary', messages: '3 New', badge: 'e-badge e-badge-primary', icons: 'primary', type: 'Primary' },
{ id: 'p_02', text: 'Social', messages: '27 New', badge: 'e-badge e-badge-secondary', icons: 'social', type: 'Primary' },
{ id: 'p_03', text: 'Promotions', messages: '7 New', badge: 'e-badge e-badge-success', icons: 'promotion', type: 'Primary' },
{ id: 'p_04', text: 'Updates', messages: '13 New', badge: 'e-badge e-badge-info', icons: 'updates', type: 'Primary' },
{ id: 'p_05', text: 'Starred', messages: '', badge: '', icons: 'starred', type: 'All Labels' },
{ id: 'p_06', text: 'Important', messages: '2 New', badge: 'e-badge e-badge-danger', icons: 'important', type: 'All Labels' },
{ id: 'p_07', text: 'Sent', messages: '', badge: '', icons: 'sent', type: 'All Labels' },
{ id: 'p_08', text: 'Outbox', messages: '', badge: '', icons: 'outbox', type: 'All Labels' },
{ id: 'p_09', text: 'Drafts', messages: '7 New', badge: 'e-badge e-badge-warning', icons: 'draft', type: 'All Labels' },
];
let list: ListView = new ListView({
// Bind listview datasource
dataSource: dataSource,
// Assign header title
headerTitle: 'Inbox',
// Enable header
showHeader: true,
// Assign template
template: '<div class="listWrapper" style="width: inherit;height: inherit;"><span class="${icons} list_svg"> </span>' +
'<span class="list_text">${text} </span>' +
'${if(messages !== "")}<span class="${badge}" style="float: right;margin-top: 16px;font-size: 12px;">${messages}</span>${/if}</div>',
// Map fields
fields: { groupBy: 'type' },
// Bind actioncomplete event
actionComplete: () => {
badgeElements = Array.prototype.slice.call(document.getElementById('lists').getElementsByClassName('e-badge'));
}
});
list.appendTo('#lists');
document.getElementById('button').addEventListener('click', function buttonClick() {
badgeElements.forEach((element) => {
element.textContent = (Number(element.textContent.split(' ')[0])) + 1 + ' New';
})
});