How to Filter Items in Angular ListView Using DataManager

12 Sep 20254 minutes to read

You can dynamically filter items in the Angular ListView component based on user input using Syncfusion’s DataManager. This guide walks you through rendering a searchable ListView with real-time filtering.

Steps to Implement Filtering

1. Render a TextBox to capture user input for filtering.
2. Configure the ListView with a dataSource and set the sortOrder property.
3. Bind the keyup event to the TextBox to trigger filtering logic.
4. Use DataManager and Query.where to filter the data locally via the executeLocal method.
5. Update the ListView’s dataSource with the filtered result.

Filtering Variants

• Starts with: Default behavior using Query.where(..., 'startswith', ...)
• Ends with: Replace 'startswith' with 'endswith'
• Contains: Use 'contains' for substring matching
• Case-insensitive: Normalize input and data using .toLowerCase() before filtering
• Multiple conditions: Chain multiple Query.where() clauses

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component, ViewChild } from "@angular/core";
import { ListViewComponent } from "@syncfusion/ej2-angular-lists";
import { enableRipple } from "@syncfusion/ej2-base";
import { DataManager, Query, ODataV4Adaptor } from "@syncfusion/ej2-data";
enableRipple(true);

@Component({
  imports: [
    ListViewModule
  ],
  standalone: true,
  selector: 'my-app',
  template: `<div id="sample">
            <input #textbox class="e-input" type="text" id="textbox" placeholder="Filter" title="Type in a name" (keyup)=onkeyup($event) />
            <ejs-listview #list id='list' [dataSource]='listData' [fields]='fields' [sortOrder]='Ascending'></ejs-listview>
        </div>`,
  styles: [`
        #list {
  box-shadow: 0 1px 4px #ddd;
  border-bottom: 1px solid #ddd;
}
#sample {
  height: 220px;
  margin: 0 auto;
  display: table;
}
        `]
})

export class AppComponent {
  public listData: Object = [
    { text: "Hennessey Venom", id: "list-01" },
    { text: "Bugatti Chiron", id: "list-02" },
    { text: "Bugatti Veyron Super Sport", id: "list-03" },
    { text: "SSC Ultimate Aero", id: "list-04" },
    { text: "Koenigsegg CCR", id: "list-05" },
    { text: "McLaren F1", id: "list-06" }
  ];

  public fields: Object = { text: "text", id: "id" };
  @ViewChild('list')
  listObj?: ListViewComponent;
  @ViewChild('textbox') textboxEle: any;
  Ascending: any;
  onkeyup(event: any) {
    let value = this.textboxEle.nativeElement.value;
    let data = new DataManager(this.listData).executeLocal(new Query().where("text", "startswith", value, true));
    if (!value) {
      (this.listObj as ListViewComponent).dataSource = (this.listData as any).slice();
    } else {
      ((this.listObj as ListViewComponent).dataSource as any) = data;
    }
    this.listObj?.dataBind();
  }
}

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

main.ts

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

In this demo, data has been filtered with starting character of the list items. You can also filter list items with ending character by passing the endswith in where clause instead of startswith.