How to trigger click event on angular 5 with Jquery

Question

I want to trigger click event based on each element id but it is not working.

Here is my code:

ngOnInit() {
  this.getProductsLists();
}

getProductsLists() {
  this.supplierService.getProductLists()
    .subscribe(data => {
      this.productData = data;
      this.productData.forEach((value) => {
        value.prodCategoryChild.forEach((element) => {
          $('#prod' + element.id).click(() => {
            alert('This is not working');
          })
        });
      });
    });
}

What am I missing here? Thanks.

First up, you shouldn't be using jQuery for accessing the DOM in Angular in the first place. Second, you can use *ngFor in your template and bind to the click event of each item and pass the id or index as an argument to the function that you'll be calling as your click handler. — SiddAjmera
– SiddAjmera, Commented Sep 28, 2018 at 7:06

Vanojx1 · Accepted Answer · 2018-09-28 07:11:03Z

1

An Angular way should be like this:

<div-or-whatever (click)="clickHandler(prod.id)" *ngFor="let prod of productData" >{{ prod.label }}</div-or-whatever>

then

clickHandler(id) {
    alert(`Clicked prod ${id}`);
}

answered Sep 28, 2018 at 7:11

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to trigger click event on angular 5 with Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related