Contact Support
Add and remove list items from ListView in Angular ListView component
12 Sep 20255 minutes to read
You can dynamically add or remove list items from the ListView component using the addItem
and removeItem
methods. This functionality is essential for creating interactive applications such as task managers, shopping lists, or any scenario where users need to modify list content in real-time.
The following implementation demonstrates how to create a complete add and remove functionality with proper event handling and user interface elements.
Implementation steps
Follow these steps to implement dynamic add and remove functionality:
Step 1: Configure the ListView with template
Render the ListView with your data source and use the template
property to create a custom layout that includes a delete icon for each list item. The template allows you to embed interactive elements directly within each list item.
Step 2: Handle list item removal
Bind a click event handler to the delete icon created in the template. When triggered, this handler will identify the specific list item and pass it to the removeItem
method to remove it from the ListView.
Step 3: Implement add functionality
Create an “Add Item” button and bind a click event handler. In the event handler, prepare the new item data (including a unique identifier) and pass it to the addItem
method to append the new item to the ListView.
Step 4: Configure event handling
Use the actionComplete
event to handle post-operation tasks such as updating UI state or performing additional validations after items are successfully added or removed.
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';
import { ListViewComponent } from '@syncfusion/ej2-angular-lists';
@Component({
imports: [
ListViewModule, ButtonModule
],
standalone: true,
selector: 'my-app',
template: `<ejs-listview #list id='sample-list' [dataSource]='data' [fields]='fields'>
<ng-template #template let-data="">
<div class='text-content'> <span class = 'delete-icon' (click)="deleteItem($event)"></span> </div>
</ng-template>
</ejs-listview>
<button ejs-button id="btn" (click)="addItem()">Add Item</button>`,
})
export class AppComponent {
@ViewChild('list')
listViewInstance?: ListViewComponent;
//define the array of string
public data: object[] = [{ text: "Hennessey Venom", id: "1", icon: "delete-icon" },
{ text: "Bugatti Chiron", id: "2", icon: "delete-icon" },
{ text: "Bugatti Veyron Super Sport", id: "3", icon: "delete-icon" },
{ text: "Aston Martin One- 77", id: "4", icon: "delete-icon" },
{ text: "Jaguar XJ220", id: "list-5", icon: "delete-icon" },
{ text: "McLaren P1", id: "6", icon: "delete-icon" }];
public fields: Object = { text: "text", iconCss: "icon" };
deleteItem(args: any) {
args.stopPropagation();
let liItem = args.target.parentElement.parentElement;
this.listViewInstance?.removeItem(liItem);
}
addItem() {
let data = {
text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),
id: (Math.random() * 1000).toFixed(0).toString(),
icon: "delete-icon"
};
this.listViewInstance?.addItem([data]);
}
}
@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';
#sample-list {
margin: 40px auto;
max-width: 500px;
}
#btn {
margin: 40px auto;
display: block;
}
/* csslint ignore:start */
@font-face {
font-family: "e-list-icon";
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmXOniGAAAAcgAAAFAaGVhZBC1AhkAAADQAAAANmhoZWEIUQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCgAAAAAAHAAAAABm1heHABDgCYAAABCAAAACBuYW1lv4Bt4QAAAwgAAAIZcG9zdJx8QW4AAAUkAAAAOwABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAApWcDV18PPPUACwQAAAAAANbRXpQAAAAA1tFelAAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAACAIwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAoAAAAAIAAAAAA/QD9AALAIsAAAEHFwcnByc3JzcXNwUfHz8fLx8PHgLuhIRrg4NrhIRrg4P9iQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgEBAgMEBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwICg4OGa4SEa4ODaoCE7hoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAQIDBAYHBwkLCwwNDg8PERESExQUFRYWFxcXGRgZGRoaGRkYGRcXFxYWFRQUExIREQ8PDg0MCwsJBwcGBAMCAQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAGAAEAAQAAAAAAAgAHAAcAAQAAAAAAAwAGAA4AAQAAAAAABAAGABQAAQAAAAAABQALABoAAQAAAAAABgAGACUAAQAAAAAACgAsACsAAQAAAAAACwASAFcAAwABBAkAAAACAGkAAwABBAkAAQAMAGsAAwABBAkAAgAOAHcAAwABBAkAAwAMAIUAAwABBAkABAAMAJEAAwABBAkABQAWAJ0AAwABBAkABgAMALMAAwABBAkACgBYAL8AAwABBAkACwAkARcgZGVsZXRlUmVndWxhcmRlbGV0ZWRlbGV0ZVZlcnNpb24gMS4wZGVsZXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABkAGUAbABlAHQAZQBSAGUAZwB1AGwAYQByAGQAZQBsAGUAdABlAGQAZQBsAGUAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABkAGUAbABlAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAQIBAwARY2lyY2xlLWNsb3NlLS0tMDIAAAA=) format("truetype");
font-weight: normal;
font-style: normal;
}
/* csslint ignore:end */
#sample-list .delete-icon::after {
font-family: "e-list-icon";
content: "\e700";
float: right;
cursor: pointer;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));