Integrate avatar into ListView in Angular Avatar component

27 Aug 20256 minutes to read

The Avatar component seamlessly integrates with ListView to create rich, visually appealing list interfaces commonly used in contact applications, user directories, and messaging platforms. This integration enhances the user experience by providing immediate visual identification of list items through profile images, initials, or icons.

The xsmall avatar size provides the ideal balance between visual impact and space efficiency within ListView items. This sizing ensures consistent alignment with text content and maintains the overall list structure without overwhelming the interface.

app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import  { ListViewModule } from '@syncfusion/ej2-angular-lists';

@Component({
    imports: [
        ListViewModule, CommonModule
    ],
    selector: 'my-app',
    standalone: true,
    template: `
    <div id="letterAvatarList">
        <ejs-listview id='letterAvatarList' [dataSource]='dataSource' [headerTitle]='headerTitle' [showHeader]='true' [sortOrder]='sortOrder'>
            <ng-template #template let-dataSource="">
                <div class="listWrapper">
                    <span class="e-avatar e-avatar-small e-avatar-circle " *ngIf="dataSource.avatar !== ''"></span>
                    <span class=" e-avatar e-avatar-small e-avatar-circle" *ngIf="dataSource.pic !== '' "> </span>
                    <span class="text"></span>
                </div>
            </ng-template>
        </ejs-listview>
    </div>
    `
})

export class AppComponent { 
     // Listview datasource with avatar and image source fields
     public dataSource?: { [key: string]: Object; }[] = [
        { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04', color: '' },
        { id: 's_02', text: 'Nancy', avatar: 'N', pic: '', color: 'green' },
        { id: 's_05', text: 'John', pic: 'pic01', avatar: '', color: '' },
        { id: 's_03', text: 'Andrew', avatar: 'A', pic: '', color: 'blue' },
        { id: 's_06', text: 'Michael', pic: 'pic02', avatar: '', color: '' },
        { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '', color: '' },
        { id: 's_08', text: 'Margaret', avatar: 'M', pic: '', color: 'red' }
    ];

    public headerTitle: string = 'Contacts';
    public sortOrder: string = 'Ascending';
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#element {
  width: 400px;
  margin: auto;
  border-radius: 3px;
  justify-content: center;
}

/* Listview Customization */

#letterAvatarList {
  max-width: 350px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

#letterAvatarList .listWrapper {
  width: inherit;
  height: inherit;
  position: relative;
}

#letterAvatarList .e-list-header {
  height: 54px;
}

#letterAvatarList .e-list-item {
  cursor: pointer;
  height: 50px;
  line-height: 44px;
  border: 0;
}

/* Badge Positioning */

#letterAvatarList .e-badge {
  margin-top: 12px;
}

#letterAvatarList .listWrapper .text {
  width: 60%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 50px;
}

/* Avatar Positioning */

#letterAvatarList .listWrapper .e-avatar {
  position: absolute;
  top: calc(100% - 40px);
  font-size: 10px;
  left: 5px;
}

/* Avatar Background Customization */

#letterAvatarList .e-list-item:nth-child(1) .e-avatar {
  background-color: #039BE5;
}

#letterAvatarList .e-list-item:nth-child(3) .e-avatar {
  background-color: #E91E63;
}

#letterAvatarList .e-list-item:nth-child(5) .e-avatar {
  background-color: #009688;
}

/* Avatar images using 'background-image' property */

.pic01 {
  background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/2.png');
}

.pic02 {
  background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/5.png');
}

.pic03 {
  background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/6.png');
}

.pic04 {
  background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/7.png');
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));