Customizing templates in Angular ListView component

12 Sep 202514 minutes to read

The ListView component provides comprehensive template customization options that allow you to control the appearance and layout of list items, group headers, and the main header. Templates enable you to create rich, interactive interfaces by defining custom HTML structures with data binding for different sections of the ListView.

Header template

The ListView header can be customized using the headerTemplate property, which allows you to add interactive elements like search bars, action buttons, or branding elements above your list content.

To implement a custom header template, define your template content within an ng-template directive and set the showHeader property to true to display the ListView header.

In the following example, the ListView renders with a customized header containing search, add, and sort buttons for enhanced user interaction.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewChild } from '@angular/core';

@Component({
    imports: [
        ListViewModule, ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <div id = 'flat-list'>
        <!-- ListView element -->
        <ejs-listview id='element' [dataSource]='data' showHeader='true'>
            <ng-template #headerTemplate let-data="">
                <div class="headerContainer"><span class="fruitHeader">Fruits</span><button ejs-button id="search" iconCss='e-icons e-search-icon' cssClass='e-small e-round' isPrimary='true'></button><button ejs-button id="add" iconCss='e-icons e-add-icon' cssClass='e-small e-round' isPrimary='true'></button><button ejs-button id="sort" iconCss='e-icons e-sort-icon' cssClass='e-small e-round' isPrimary='true'></button></div>
            </ng-template>
        </ejs-listview>
    </div>
    `,
})

export class AppComponent {
    public data = [
        { text: 'Date', id: '1', imgUrl: './dates.jpg' },
        { text: 'Fig', id: '2', imgUrl: './fig.jpg' },
        { text: 'Apple', id: '3', imgUrl: './apple.png' },
        { text: 'Apricot', id: '4', imgUrl: './apricot.jpg' },
        { text: 'Grape', id: '5', imgUrl: './grape.jpg' },
        { text: 'Strawberry', id: '6', imgUrl: './strawberry.jpg' },
        { text: 'Pineapple', id: '7', imgUrl: './pineapple.jpg' },
        { text: 'Melon', id: '8', imgUrl: './melon.jpg' },
        { text: 'Lemon', id: '9', imgUrl: './lemon.jpg' },
        { text: 'Cherry', id: '10', imgUrl: './cherry.jpg' },
    ];
}

main.ts

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

Template

Individual ListView items can be fully customized using the template property, allowing you to define complex layouts with data binding, conditional rendering, and custom styling for each list item.

To customize list items, define your template content within an ng-template directive. The template has access to the data context of each list item, enabling dynamic content generation based on your data source.

The following built-in CSS classes are provided to streamline common template layouts and ensure consistent styling across different template scenarios:

CSS class	Description
e-list-template, e-list-wrapper	These classes are used to differentiate normal and template rendering, which are mandatory for template rendering. The e-list-template class should be added to the root of the ListView element and e-list-wrapper class should be added to the template element wrapper.
e-list-content	This class is used to align list content and it should be added to the content element <div class="e-list-wrapper"> <span class="e-list-content">ListItem</span> </div>
e-list-avatar	This class is used for avatar customization. It should be added to the template element wrapper. After adding it, we can customize our element with Avatar classes <div class="e-list-wrappere-list-avatar"> <span class="e-avatar e-avatar-circle">MR</span> <span class="e-list-content">ListItem</span> </div>
e-list-avatar-right	This class is used to align avatar to right side of the list item. It should be added to the template element wrapper. After adding it, we can customize our element with Avatar classes <div class="e-list-wrappere-list-avatar-right"> <span class="e-list-content">ListItem</span> <span class="e-avatar e-avatar-circle">MR</span> </div>
e-list-badge	This class is used for badge customization .It should be added to the template element wrapper. After adding it, we can customize our element with Badge classes <div class="e-list-wrappere-list-badge"> <span class="e-list-content">ListItem</span> <span class="e-badge e-badge-primary">MR</span> </div>
e-list-multi-line	This class is used for multi-line customization. It should be added to the template element wrapper. After adding it, we can customize List item’s header and description <div class="e-list-wrappere-list-multi-line"> <span class="e-list-content">ListItem</span> </div>
e-list-item-header	This class is used to align a list header and it should be added to the header element along with the multi-line class <div class="e-list-wrappere-list-multi-line"> <span class="e-list-item-header">ListItem Header</span> <span class="e-list-content">ListItem</span> </div>

In the following example, list items are customized using built-in CSS classes to create rich, structured layouts with avatars and multi-line content.

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, NgIf } from '@angular/common';

@Component({
  imports: [
    ListViewModule, CommonModule, NgIf
  ],
  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: ""
    }
  ];
}

main.ts

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

Group template

ListView group headers can be customized using the groupTemplate property, enabling you to create informative section headers that can display aggregate information, custom styling, or interactive elements for grouped data.

To implement group templates, define your template content within an ng-template directive. The template receives the group data context, including the group key and associated items, allowing you to display dynamic information about each group.

In the following example, ListView items are grouped by category using the groupBy field mapping. The group header template displays both the category name and the count of items within each group, providing users with helpful context about the data organization.

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

@Component({
  imports: [
    ListViewModule
  ],
  standalone: true,
  selector: 'my-app',
  template: `<ejs-listview id='List' [dataSource]='dataSource' cssClass='e-list-template' [fields]='fields'>
      <ng-template #template let-dataSource="">
        <div class="e-list-wrapper e-list-multi-line e-list-avatar">
            <img class="e-avatar e-avatar-circle" src= style="background:#BCBCBC" />
            <span class="e-list-item-header"></span>
            <span class="e-list-content"></span>
        </div>
      </ng-template>
      <ng-template #groupTemplate let-dataSource="">
        <div>
          <span className="category"></span>
          <span id="count">  Item(s)</span>
        </div>
      </ng-template>
  </ejs-listview>`
})

export class AppComponent {
  public dataSource: Object = [
    { Name: 'Nancy', contact: '(206) 555-985774', id: '1', image: 'https://ej2.syncfusion.com/demos/src/grid/images/1.png', category: 'Experience' },
    { Name: 'Janet', contact: '[phone]', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
    { Name: 'Margaret', contact: '[phone]', id: '4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
    { Name: 'Andrew ', contact: '[phone]', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience' },
    { Name: 'Steven', contact: '(71) 555-4848', id: '6', image: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', category: 'Fresher' },
    { Name: 'Michael', contact: '(71) 555-7773', id: '7', image: 'https://ej2.syncfusion.com/demos/src/grid/images/6.png', category: 'Experience' },
    { Name: 'Robert', contact: '(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' },
    { Name: 'Laura', contact: '[phone]', id: '9', image: 'https://ej2.syncfusion.com/demos/src/grid/images/8.png', category: 'Experience' },
  ];

  public fields: Object = { text: 'Name', groupBy: 'category' };
}

main.ts

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