Click event on ngfor loop running twice. angular

Question

I've found an interesting problem that I can't bypass.

I have the follwing *ngFor loop with a click event.

<label class="input-group" *ngFor="let status of statuses; trackBy: id"
    (click)="filterByCategory(status.name)">{{ status.name }}
    <span class="chip chip-icon" [attr.data-chip-state]="status.name">
    {{ partners | counter: status.name }}</span>
    <input type="checkbox" />
    <span class="checkmark"></span>
</label>

the click event fn filterByCategory() is a simple process, responsible for add or remove string from an array to then filter an array of objects.

  filterByCategory(category, event: Event) { 
    let verify = this.filterArr.includes(category);
   
    if (!verify) { 
      this.filterArr.push(category)
    } else {    
      let indexOfCategory = this.filterArr.indexOf(category);
      this.filterArr.splice(indexOfCategory, 1);
    } 
  
    this.filteredPartners = this.partners.filter(partner => {
      return this.filterArr.includes(partner.partner_status.name);
    }) 
  }

When the event is fired, it runs twice and the if statement first adds the string and then removes it.

Does any one has a way to resolve this?

Thank you!

KamLar · Accepted Answer · 2021-11-20 19:37:54Z

1

I believe it's because you attached click event listener to label. If you click on the label you trigger the event for the first time, but then the checkbox is being clicked and it triggers once again click event.

Because you are using label here - you can freely move click listener to checkox. So instead of what you have, you can do it like this:

<label class="input-group" *ngFor="let status of statuses; trackBy: id">{{ status.name }}
<span class="chip chip-icon" [attr.data-chip-state]="status.name">
{{ partners | counter: status.name }}</span>
<input type="checkbox" (click)="filterByCategory(status.name)" />
<span class="checkmark"></span>

answered Nov 20, 2021 at 19:37

KamLar

4284 silver badges9 bronze badges

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

1 Comment

cristian Oliveira Over a year ago

You were absolutely right! Actually that part didn't cross my mind since the input is display:none, i forgot that the label is asking angular to run the even twice since the check changed! Thank you Kamlar!

Collectives™ on Stack Overflow

Click event on ngfor loop running twice. angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related