How can I help you?
Integrate avatar into badge in Angular Avatar component
4 Mar 202617 minutes to read
The Badge component can be integrated with the Avatar component to create notification avatars that display user profiles alongside visual indicators. This combination is ideal for showing status notifications, message counts, status indicators, or alert notifications.
Implementation
The default avatar (e-avatar) and circle avatar (e-avatar-circle) classes work seamlessly with notification badges (e-badge-notification) to create these enhanced user interface elements.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
imports: [
CommonModule
],
standalone: true,
selector: 'my-app',
template: `
<div id='element'>
<div class="sample_container avatar-badge">
<div class="avatar-block">
<!-- Card Component -->
<div class="e-card e-avatar-showcase">
<div class="e-card-content">
<div class="avatar-sub-block">
<!-- xSmall Avatar-->
<div class="e-avatar e-avatar-xsmall">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
</div>
<div class="avatar-sub-block">
<!-- Small Avatar-->
<div class="e-avatar e-avatar-small">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
</div>
<div class="avatar-sub-block">
<!-- Avatar-->
<div class="e-avatar">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
</div>
<div class="avatar-sub-block">
<!-- Large Avatar-->
<div class="e-avatar e-avatar-large">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
</div>
<div class="avatar-sub-block">
<!-- xLarge Avatar-->
<div class="e-avatar e-avatar-xlarge">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
</div>
</div>
</div>
</div>
<div class="circleAvatar avatar-block">
<!-- Card Component -->
<div class="e-card e-avatar-showcase">
<div class="e-card-content">
<div class="avatar-sub-block">
<!-- xSmall Circle Avatar-->
<div class="e-avatar e-avatar-circle e-avatar-xsmall">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
</div>
<div class="avatar-sub-block">
<!-- Small Circle Avatar-->
<div class="e-avatar e-avatar-circle e-avatar-small">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
</div>
<div class="avatar-sub-block">
<!-- Circle Avatar-->
<div class="e-avatar e-avatar-circle">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
</div>
<div class="avatar-sub-block">
<!-- Large Circle Avatar-->
<div class="e-avatar e-avatar-circle e-avatar-large">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
</div>
<div class="avatar-sub-block">
<!-- xLarge Circle Avatar-->
<div class="e-avatar e-avatar-circle e-avatar-xlarge">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic">
</div>
<!-- Notification Badge -->
<span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
</div>
</div>
</div>
</div>
</div>
</div>
`
})
export class AppComponent { }@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-notifications/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material3.css';
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#element {
display: block;
margin: auto;
border-radius: 3px;
justify-content: center;
}
.sample_container.avatar-badge .avatar-sub-block {
display: inline-block;
position: relative;
margin: 7px
}
.sample_container.avatar-badge .avatar-block {
display: inline-block;
vertical-align: top;
}
/* Media Queries for various devices */
@media only screen and (max-width: 965px) {
.sample_container.avatar-badge {
max-width: 332px;
margin: auto;
margin-top: 0;
}
.circleAvatar {
margin-top: 15px;
}
.e-avatar-showcase.e-card {
width: 320px;
}
}
@media only screen and (min-width: 965px) {
.sample_container.avatar-badge {
max-width: 825px;
margin: auto;
margin-top: 70px;
}
.e-avatar-showcase.e-card {
width: 400px;
}
}
.e-avatar.image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* Card Customization */
.e-avatar-showcase.e-card {
height: 140px;
padding: 4px;
margin: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 8px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-header-title {
align-self: center;
font-size: 18px;
letter-spacing: 1px;
text-shadow: #eaeaea 1px 1px 2px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title {
color: rgba(0, 0, 0, 0.75);
white-space: pre-line;
font-size: 14px;
text-shadow: #eaeaea 1px 1px 2px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {
margin: 0;
}
.e-avatar-showcase.e-card .e-card-content {
align-self: center;
padding: 10px 11px 10px 0px;
color: rgba(0, 0, 0, 0.75);
overflow: visible;
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));