The badge is a completely customizable and integral component, and this section shows how to customize and integrate badges with other components.
Even though badges come with 8 predefined colors
, you can also customize the colour of the badge as desired.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id='element'>
<h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill green">New</span></h1>
<h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill blue">New</span></h1>
<h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill purple">New</span></h1>
<h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill gradient">New</span></h1>
</div>
`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Badges are designed to change its size based on the content. To change the size of a badge,
adjust the font size
of the badge.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id='element'>
<h1>Badge Component <span class="e-badge e-badge-primary size_1">New</span></h1>
<h1>Badge Component <span class="e-badge e-badge-primary size_2">New</span></h1>
<h1>Badge Component <span class="e-badge e-badge-primary size_3">New</span></h1>
</div>
`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Even though the badges support the conventional top
and bottom
positions, the position of the
badges can be changed as desired.
This can be done by adding a custom class to the badge element to override the default position applied
from the source.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id='element'>
<div style="width: 200px;margin: 10px auto;">
<div class="badge-block">
<div class="whatsapp svg_icons"></div>
<!-- Warning Colored Notification Badge -->
<span class="e-badge e-badge-warning e-badge-notification e-badge-overlap leftTop">99+</span>
</div>
<div class="badge-block">
<div class="facebook svg_icons"></div>
<!-- Danger Colored Notification Badge -->
<span class="e-badge e-badge-danger e-badge-notification e-badge-overlap leftTop">99+</span>
</div>
<div class="badge-block">
<div class="skype svg_icons"></div>
<!-- Secondary Colored Notification Badge -->
<span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap leftTop">18</span>
</div>
</div>
<div style="width: 200px;margin: 10px auto;">
<div class="badge-block">
<div class="whatsapp svg_icons"></div>
<!-- Warning Colored Notification Badge -->
<span class="e-badge e-badge-warning e-badge-notification e-badge-overlap leftBottom">99+</span>
</div>
<div class="badge-block">
<div class="facebook svg_icons"></div>
<!-- Danger Colored Notification Badge -->
<span class="e-badge e-badge-danger e-badge-notification e-badge-overlap leftBottom">99+</span>
</div>
<div class="badge-block">
<div class="skype svg_icons"></div>
<!-- Secondary Colored Notification Badge -->
<span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap leftBottom">18</span>
</div>
</div>
</div>
`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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 { Component } from '@angular/core';
@Component({
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="{{dataSource.icons}} list_svg"> </span>
<span class="list_text">{{dataSource.text}} </span>
<span class="{{dataSource.badge}}" style="float: right;margin-top: 16px;font-size: 12px;">{{dataSource.messages}}</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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ListViewModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Badges in real-time needs to be updated dynamically based on the requirements. In this sample, using Angular data binding the badges content will be updated dynamically. Click the increment button to change the badge value.
import { Component } from '@angular/core';
@Component({
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="{{dataSource.icons}} list_svg"> </span>
<span class="list_text">{{dataSource.text}} </span>
<span class="{{dataSource.badge}}" *ngIf="dataSource.badge !== '' " style="float: right;margin-top: 16px;font-size: 12px;">{{badge[dataSource.text]}} New</span>
</div>
</ng-template>
</ejs-listview>
<p class='crossline'></p>
<span class='incr_button'>
<button class='e-btn e-primary' (click)="onClick()">Increment Badge Count</button>
</span>
</div>
`
})
export class AppComponent {
public badge = {
Primary: 3,
Social: 27,
Promotions: 7,
Updates: 13,
Important: 2,
Drafts: 7
}
// Datasource for listview, badge field is the class data for Badges
public dataSource: { [key: string]: Object }[] = [
{ id: 'p_01', text: 'Primary', badge: 'e-badge e-badge-primary', icons: 'primary', type: 'Primary' },
{ id: 'p_02', text: 'Social', badge: 'e-badge e-badge-secondary', icons: 'social', type: 'Primary' },
{ id: 'p_03', text: 'Promotions', badge: 'e-badge e-badge-success', icons: 'promotion', type: 'Primary' },
{ id: 'p_04', text: 'Updates', badge: 'e-badge e-badge-info', icons: 'updates', type: 'Primary' },
{ id: 'p_05', text: 'Starred', badge: '', icons: 'starred', type: 'All Labels' },
{ id: 'p_06', text: 'Important', badge: 'e-badge e-badge-danger', icons: 'important', type: 'All Labels' },
{ id: 'p_07', text: 'Sent', badge: '', icons: 'sent', type: 'All Labels' },
{ id: 'p_08', text: 'Outbox', badge: '', icons: 'outbox', type: 'All Labels' },
{ id: 'p_09', text: 'Drafts', badge: 'e-badge e-badge-warning', icons: 'draft', type: 'All Labels' },
];
// Map fields
public fields: object = { groupBy: 'type' };
public onClick() {
let badgeKeys = Object.keys(this.badge);
for (let badge of badgeKeys) {
this.badge[badge]++;
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ListViewModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);