You can customize the ListView using the template property. Refer to the following steps to customize ListView as mobile contact view with our ej2-avatar
.
let data: any = [
{
text: "Jenifer",
contact: "(206) 555-985774",
id: "1",
avatar: "",
pic: "pic01"
},
{ text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" },
];
avatar
classes in ListView template to customize contact icon. In the following codes, medium size avatar has been set using the class name e-avatar e-avatar-circle
from data source.{% raw %}
<ng-template #template let-data="">
<div class="e-list-wrapper e-list-multi-line e-list-avatar">
<span class="e-avatar e-avatar-circle" *ngIf="data.avatar !== ''">{{data.avatar}}</span>
<span class="{{data.pic}} e-avatar e-avatar-circle" *ngIf="data.pic !== '' "> </span>
<span class="e-list-item-header">{{data.text}}</span>
<span class="e-list-content">{{data.contact}}</span>
</div>
</ng-template>
{% endraw %}
Avatars can be set in different sizes in avatar classes. To know more about avatar classes, refer to Avatar.
sortOder
property of ListView.showHeader
property, and set the headerTitle
as Contacts
.import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id="sample">
<ejs-listview id='List' [dataSource]='data' headerTitle='Contacts' cssClass='e-list-template' [showHeader]='true' sortOrder='Ascending'>
<ng-template #template let-data="">
<div class="e-list-wrapper e-list-multi-line e-list-avatar">
<span class="e-avatar e-avatar-circle" *ngIf="data.avatar !== ''">{{data.avatar}}</span>
<span class="{{data.pic}} e-avatar e-avatar-circle" *ngIf="data.pic !== '' "> </span>
<span class="e-list-item-header">{{data.text}}</span>
<span class="e-list-content">{{data.contact}}</span>
</div>
</ng-template>
</ejs-listview>
</div>
`
})
export class AppComponent {
// Listview datasource with avatar and image source fields
public data: { [key: string]: Object; }[] = [
{
text: "Jenifer",
contact: "(206) 555-985774",
id: "1",
avatar: "",
pic: "pic01"
},
{ text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" },
{
text: "Isabella",
contact: "(206) 555-8122",
id: "4",
avatar: "",
pic: "pic02"
},
{
text: "William ",
contact: "(206) 555-9482",
id: "5",
avatar: "W",
pic: ""
},
{
text: "Jacob",
contact: "(71) 555-4848",
id: "6",
avatar: "",
pic: "pic04"
},
{ text: "Matthew", contact: "(71) 555-7773", id: "7", avatar: "M", pic: "" },
{
text: "Oliver",
contact: "(71) 555-5598",
id: "8",
avatar: "",
pic: "pic03"
},
{
text: "Charlotte",
contact: "(206) 555-1189",
id: "9",
avatar: "C",
pic: ""
}
];
}
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%;
}
#List {
margin: 0 auto;
font-size: 15px;
border: 1px solid #ccc;
width: 350px;
}
.pic01 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}
.pic02 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
}
.pic03 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
}
.pic04 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
}
#List .e-list-item:nth-child(1) .e-avatar {
background-color: #039be5;
}
#List .e-list-item:nth-child(2) .e-avatar {
background-color: #e91e63;
}
#List .e-list-item:nth-child(6) .e-avatar {
background-color: #009688;
}
#List .e-list-item:nth-child(8) .e-avatar {
background-color: #0088;
}
#List .e-list-header{
background: rgb(2, 120, 215);
color: white;
}