Avatar is integrated into the listview to create contacts applications. The xsmall
size avatar is
used to match the size of the list item. Letters and images are also used as avatar content.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
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 {{dataSource.color}}" *ngIf="dataSource.avatar !== ''">{{dataSource.avatar}}</span>
<span class="{{dataSource.pic}} e-avatar e-avatar-small e-avatar-circle" *ngIf="dataSource.pic !== '' "> </span>
<span class="text">{{dataSource.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';
}
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);
#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;
}
.material #letterAvatarList .e-list-header .e-text {
line-height: 22px;
}
.fabric #letterAvatarList .e-list-header .e-text {
line-height: 22px;
}
.bootstrap #letterAvatarList .e-list-header .e-text {
line-height: 13px;
}
.highcontrast #letterAvatarList .e-list-header .e-text {
line-height: 20px;
}
#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');
}