Answers for "add javascrip onclick to angular"

6

onclick event in angular

(click)="myClickFunction($event)"
Posted by: Guest on July-17-2020
0

add item on click angular

import { Component, ViewChild } from '@angular/core';

@Component({
selector: 'my-app',
template: `<ejs-listview #list id='sample-list' [dataSource]='data' [fields]='fields' (actionComplete)='onComplete()'>
<ng-template  #template let-data="">
<div class='text-content'> {{data.text}} <span class = 'delete-icon'></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);
  this.onComplete();
}
  onComplete() {
  let iconEle = document.getElementsByClassName("delete-icon");
  //Event handler to bind the click event for delete icon
  Array.from(iconEle).forEach((element) => {
element.addEventListener("click", this.deleteItem.bind(this));
  });
}

addItem(){
  let data = {
text: "Koenigsegg - " + (Math.random() * 1000).toFixed(0),
id: (Math.random() * 1000).toFixed(0).toString(),
icon: "delete-icon"
  };
  this.listviewInstance.addItem([data]);
}
}
Posted by: Guest on September-21-2021

Code answers related to "Javascript"

Browse Popular Code Answers by Language