add item on click angular

1import { NgModule } from '@angular/core';
2import { BrowserModule } from '@angular/platform-browser';
3import { AppComponent } from './app.component';
4import { ListViewModule } from '@syncfusion/ej2-angular-lists';
5import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
6/**
7 * Module
8 */
9@NgModule({
10    imports: [
11        BrowserModule,
12        ListViewModule, ButtonModule
13    ],
14    declarations: [AppComponent],
15    bootstrap: [AppComponent]
16})
17export class AppModule { }

1import { Component, ViewChild } from '@angular/core';
2
3@Component({
4selector: 'my-app',
5template: `<ejs-listview #list id='sample-list' [dataSource]='data' [fields]='fields' (actionComplete)='onComplete()'>
6<ng-template  #template let-data="">
7<div class='text-content'> {{data.text}} <span class = 'delete-icon'></span> </div>
8</ng-template>
9</ejs-listview>
10<button ejs-button id="btn" (click)="addItem()">Add Item</button>`,
11})
12
13export class AppComponent {
14   @ViewChild('list')
15   listviewInstance: ListViewComponent;
16//define the array of string
17public data: object[] =  [{ text: "Hennessey Venom", id: "1", icon: "delete-icon" },
18  { text: "Bugatti Chiron", id: "2", icon: "delete-icon" },
19  { text: "Bugatti Veyron Super Sport", id: "3", icon: "delete-icon" },
20  { text: "Aston Martin One- 77", id: "4", icon: "delete-icon" },
21  { text: "Jaguar XJ220", id: "list-5", icon: "delete-icon" },
22  { text: "McLaren P1", id: "6", icon: "delete-icon" }];
23
24public fields: Object = {text: "text", iconCss: "icon" };
25deleteItem(args) {
26  args.stopPropagation();
27  let liItem = args.target.parentElement.parentElement;
28  this.listviewInstance.removeItem(liItem);
29  this.onComplete();
30}
31  onComplete() {
32  let iconEle = document.getElementsByClassName("delete-icon");
33  //Event handler to bind the click event for delete icon
34  Array.from(iconEle).forEach((element) => {
35element.addEventListener("click", this.deleteItem.bind(this));
36  });
37}
38
39addItem(){
40  let data = {
41text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),
42id: (Math.random() * 1000).toFixed(0).toString(),
43icon: "delete-icon"
44  };
45  this.listviewInstance.addItem([data]);
46}
47}