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.
addItem
method to add a
new list item on clicking the Add Item button.removeItem
method.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'> {{data.text}} <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) {
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 { 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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);