Search results

Integrate avatar into Listview in Angular Avatar component

15 Oct 2021 / 1 minute to read

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
Copied to clipboard
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';
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#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');
}