Integrate avatar into badge in Angular Avatar component

27 Sep 202313 minutes to read
The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar.
The default avatar (.e-avatar) and circle avatar (.e-avatar-circle) have been used with notification
badges (.e-badge-notification) in the following sample.
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';

@Component({
    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 { 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';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);