Data binding in Angular ListView component

12 Sep 202511 minutes to read

The ListView component provides flexible data binding capabilities that enable you to display data from various sources efficiently. Data binding is fundamental to creating dynamic, data-driven user interfaces and can be configured through the dataSource property, which supports both local data arrays and remote data services through DataManager integration.

ListView supports different kinds of data services such as OData, OData V4, Web API and data formats like XML, JSON, JSONP with the help of DataManager adaptors. This versatility makes it suitable for a wide range of applications, from simple static lists to complex enterprise data scenarios.

Field configuration

The following table describes the field properties that can be mapped to customize how data is displayed and behaves within the ListView:

Fields	Type	Description
id	string	Specifies the unique identifier attribute of list item, mapped from the dataSource. Used for item identification and selection operations.
text	string	Specifies the primary display text field for list items. This is the main content users will see for each item.
isChecked	string	Specifies the boolean field that determines the checked status of list item when checkboxes are enabled.
isVisible	string	Specifies the boolean field that controls the visibility state of individual list items. Hidden items are rendered in DOM. The visibility updated through display property as none through DOM element.
enabled	string	Specifies the boolean field that determines the enabled state of list items. Disabled items cannot be interacted with.
iconCss	string	Specifies the CSS class field for icons that will be displayed before the item text. Supports custom icon libraries and CSS classes.
child	string	Specifies the field containing child dataSource for nested list structures. Enables hierarchical data representation.
tooltip	string	Specifies the field containing tooltip text that appears on hover. Provides additional context for list items.
groupBy	string	Specifies the field used for categorizing and grouping list items. Items with the same groupBy value will be grouped together.
sortBy	string	Specifies the field used for sorting ListView data. Determines the order in which items are displayed.
htmlAttributes	string	Specifies the field containing custom HTML attributes as key-value pairs to be applied to individual list items.

When binding complex data to ListView, you should map the fields property correctly. Otherwise, the ListView properties remain as undefined or null, which can lead to rendering issues or unexpected behavior.

Bind to local data

Local data can be bound to ListView in two primary ways, each suitable for different data structures and use cases.

Array of simple data

ListView supports loading arrays of primitive data types like strings and numbers. In this scenario, both the value and text field represent the same data, making it ideal for simple lists like menus, tags, or basic item collections.

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='sample-list' [dataSource]='data'></ejs-listview>`,
})

export class AppComponent {
    //define the array of string
    public data: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
}

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

#sample-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

main.ts

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

Array of JSON data

ListView can generate list items from arrays of complex objects, providing greater flexibility for displaying structured data. To ensure proper rendering, you must map the appropriate object properties to the corresponding field properties.

In below example, role column has mapped with text field.

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='sample-list' [dataSource]='data' [fields]='fields' [showHeader]='true' [headerTitle]='headertitle'></ejs-listview>`,
})

export class AppComponent {
    public data: Object = [
        {
            'Name': 'Display',
            'id': 'list-01'
        },
        {
            'Name': 'Notification',
            'id': 'list-02'
        },
        {
            'Name': 'Sound',
            'id': 'list-03'
        },
        {
            'Name': 'Apps',
            'id': 'list-04'
        },
        {
            'Name': 'Storage',
            'id': 'list-05'
        },
        {
            'Name': 'Battery',
            'id': 'list-06'
        }
    ];

    public fields: Object = { text: 'Name', tooltip: 'Name', id: 'id' };
    public headertitle = 'Device settings';
}

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

#sample-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

main.ts

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

Bind to remote data

ListView supports to retrieve the data from remote data services with the help of DataManager component and Query property allows to fetch data and return it to ListView from the database.

In the below sample, displayed first 6 Products from Product table of NorthWind data service.

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 DataManager related classes
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';

@Component({
    imports: [
        ListViewModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `<ejs-listview id='sample-list' [dataSource]='data' [query]='query' [fields]='fields' [showHeader]='true' [headerTitle]='headertitle'></ejs-listview>`,
})

export class AppComponent {
    public data: Object = new DataManager({
        url: 'https://services.syncfusion.com/angular/production/api/',
        crossDomain: true
    });
    public query = new Query().from('ListView').select('EmployeeID,FirstName').take(10);
    public fields: Object = { id: 'EmployeeID', text: 'FirstName' };
    public headertitle = 'Employees';
}

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

#sample-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

main.ts

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