Integrate badge into listview in Angular Badge component
27 Apr 20244 minutes to read
The badges can be integrated with the listview
component to indicate new notification with colour based on priority.
In the following sample, default
badges are used and there is no need to customize the badge size. The component will automatically adjust the size based on the container element.
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: `
<div class="sample_container badge-list">
<ejs-listview id='lists' [dataSource]='dataSource' [fields]='fields' headerTitle='Inbox' [showHeader]='true'>
<ng-template #template let-dataSource="">
<div class="listWrapper" style="width: inherit;height: inherit;">
<span class=" list_svg"> </span>
<span class="list_text"> </span>
<span class="" style="float: right;margin-top: 16px;font-size: 12px;"></span>
</div>
</ng-template>
</ejs-listview>
</div>
`
})
export class AppComponent {
// Datasource for listview, badge field is the class data for Badges
public 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' },
];
// Map fields
public fields: object = { groupBy: 'type' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));