Add and remove list items from listview in Angular Listview component

27 Sep 20234 minutes to read

You can add or remove list items from the ListView component using the addItem and
removeItem methods.
Refer to the following steps to add or remove a list item.

• Render the ListView with data source, and use the template property to append the delete icon
  for each list item. Also, bind the click event for the delete icon using the
  actionComplete handler.

• Render the Add Item button, and bind the click event. On the click event handler, pass data with random id to the addItem method to add a
  new list item on clicking the Add Item button.

• Bind the click handler to the delete icon created in step 1. Within the click event, remove the list item by passing the
  delete icon list item to
  removeItem method.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { ListViewComponent } from '@syncfusion/ej2-angular-lists';

@Component({
    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]);
}
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ListViewModule, ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);