Create mobile contact layout in Angular ListView

12 Sep 20258 minutes to read

You can create a professional mobile contact directory interface using the ListView component’s template property combined with the Syncfusion Avatar component. This approach provides a native mobile experience with contact photos, names, and phone numbers displayed in an organized, scrollable list format.

Follow these sequential steps to implement a mobile contact layout:

Step 1: Prepare the contact data structure

Render the ListView with dataSource containing contact information including avatar data. Configure avatar data using either text initials for generated avatars or CSS class names for custom contact images:

let data: any = [
    {
    text: "Jenifer",
    contact: "(206) 555-985774",
    id: "1",
    avatar: "",
    pic: "pic01"
  },
  { text: "Amenda", contact: "[phone]", id: "2", avatar: "A", pic: "" },
];

Step 2: Configure the ListView template with Avatar integration

Set avatar classes in the ListView template to create contact icons with proper spacing and alignment. The template uses conditional rendering to display either custom images or initial-based avatars using the e-avatar e-avatar-circle classes:

  <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>

This template structure creates a multi-line list item with avatar positioning on the left, contact name as the primary header, and phone number as secondary content.

Avatars can be configured in different sizes using avatar classes. To explore comprehensive avatar styling options and size variations, refer to Avatar.

Step 3: Enable sorting and header display

Configure the ListView for optimal contact browsing by sorting contact names alphabetically using the sortOrder property. Enable the showHeader property and set the headerTitle to “Contacts” for clear navigation context.

app.component.ts

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

@Component({
  imports: [
    CommonModule, ListViewModule
  ],
  standalone: true,
  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 !== ''"></span>
                    <span class=" e-avatar e-avatar-circle" *ngIf="data.pic !== '' "> </span>
                    <span class="e-list-item-header"></span>
                    <span class="e-list-content"></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: "[phone]", id: "2", avatar: "A", pic: "" },
    {
      text: "Isabella",
      contact: "[phone]",
      id: "4",
      avatar: "",
      pic: "pic02"
    },
    {
      text: "William ",
      contact: "[phone]",
      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: "[phone]",
      id: "9",
      avatar: "C",
      pic: ""
    }
  ];

}

styles.css

@import 'node_modules/@syncfusion/ej2-base/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';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

#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;
}

main.ts

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