Angular 2 click fired multiple times inside ngFor

angular 4 function called multiple times
angular eventemitter called multiple times
button click firing twice
jquery click event firing twice
prevent onclick from firing twice
angular multiple click events
angular 4 multiple click events
angular 2 dynamic click event

I have a very weird problem (never saw before) with my component. I'm trying to remove a line when clicking on a button inside a ngFor list. When I have only one line it works but when It's more than one line the event is fired twice, once for the good line and once for the first line (after deleted the other line) :

<label>
    <div class="tag" *ngFor="let o of selectedOptions;">
        <span class="tag-text">{{ o.textContent }}</span>
        <button (click)="removeTag(o)" type="button" class="fa fa-times"></button>
    </div>
</label>

And here is my method witch is called twice (only if there is more that one "option") :

public removeTag (option: NxtSelectOptionComponent) {
    this.selectedOptions = [
        ...this.selectedOptions.filter(o => o !== option),
    ]
}

I've tried to use splice, I've tried to add stopPropagation... I don't understand I've done it tons of time and this is the first time I see that.

EDIT : the removeTag method is called when I click on .tag element this is why when I click on the button it is called twice, but I can't figure this out why... the (click) attribute is only on the button

Problem resolved : I've found the problem... FYI label tag will click on the button so if you have any (click) attribute it'll fired twice.

Actually the second click will be called by the parent element. The browsers default behavior is, to trigger a click on the input, once the parent got clicked.

Use

event.preventDefault();

to stop second trigger.

Angular 2 click fired multiple times inside ngFor - angular - html, I'm trying to remove a line when clicking on a button inside a ngFor list. When I have only one line it works but when It's more than one line the event is fired twice  How to repeat HTML element multiple times using ngFor based on a number? In Angular ngFor is directive which accomplishes the motive of displaying repeated or list of contents with least lines of code, this serves the same purpose as for loops in conventional programming languages.

Full solution:

<label>
    <div class="tag" *ngFor="let o of selectedOptions;">
        <span class="tag-text">{{ o.textContent }}</span>
        <button (click)="removeTag(o, $event)" type="button" class="fa fa-times"></button>
    </div>
</label>

Then the method that takes the event:

public removeTag (option: NxtSelectOptionComponent, event) {
    event.preventDefault(); // This is needed to prevent the click event from firing twice on a label
    this.selectedOptions = [
        ...this.selectedOptions.filter(o => o !== option),
    ]
}

Function being called multiple times. : Angular2, I have a function in template which is being called multiple times for some reason​. to quickly set up an Angular application inside of AWS using S3 and Route53. matSort> <ng-container matColumnDef="{{column.id}}" *ngFor="let column of  This page will walk through angular 2 NgFor example. NgFor is a directive that iterates over collection of data. It is used to customize data display. Whenever there is change in collection of data at runtime, that will be updated in data display iterated by NgFor directive.

Try this

<div *ngFor="let user of users; let i=index" >
    {{user.name}}
    <div>
        <a class="btn btn-danger" (click)="removeUser(i)">-</a>
    </div>
</div>

removeUser(i): void {
    this.users.splice(i, 1);
}

*ngFor iterate function are called many times · Issue #21666 , By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Angular version: X.Y.Z Angular CLI: 1.6.1 Node: 8.0.0 OS: win32 x64 Angular: @schematics/schematics: 0.0.11 typescript: 2.4.2 webpack: 3.10.​0 The method inside the ngFor is called twice, but when data are  Angular NgFor: Everything you need to know. In this tutorial, we are going to learn about the ngFor directive. We will discover, how we can use the ngFor directive to display multiple elements directly from a JavaScript array. Also, we will take a look at the utilities of the ngFor directive, like the index, or even and odd.

Method inside *ngFor is getting called multiple times · Issue #15145 , By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Method inside *ngFor is getting called multiple times #15145 src=​"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.7.2/zone.min.js"></script> angular-automatic-lock-bot bot locked and limited conversation to  Check out How to repeat an HTML element or component multiple times in Angular 9/8? What ngFor does in Angular and how it's used? ngFor is a core Angular directive that can be used as a part if Angular template syntax to entend HTML with an easy way to itertave over lists of data right inside the component's template.

Template syntax, "The sum of 1 + 1 is 2" --> <p>The sum of 1 + 1 is {{1 + 1}}.</p> A template expression produces a value and appears within the double curly braces, {{ }} . a string or a number, it returns the same string or number when called twice in a row. <button (click)="onSave($event)">Save</button> <button *ngFor="let hero of  We use the NgFor directive to loop over an array of items and create multiple elements dynamically from a template element. The template element is the element the directive is attached to. We can nest muliple NgFor directives together. We can get the index of the item we are looping over by assi…

48 answers on StackOverflow to the most popular Angular questions, ngOnInit is a lifecycle hook called by Angular2 to indicate that Angular is done It applies when a subscription is created inside a component which is One example use case for a directive would be to log a click on an element. The fact is that what works has changed a number of times as the Angular  1. Angular 9.1.11 2. Node.js 12.5.0 3. NPM 6.9.0 NgForOf Directive The NgForOf directive instantiates a template for every item in an iteration. The selector of NgForOf is ngFor. According to Angular Doc, NgForOf directive has been defined as following.

Comments
  • Did you check your filter function? isn't it a problem? Did you try putting some console.log() inside the removeTag() function to see if it's called twice? Maybe you should try to console.log(this.selectedOptions) at the end of the removeTag function to see what's been changed. Let us know if there is something new, because for now it's weird. Your code is good, so...
  • Thank you I don't have any filter function. The removeTag is called twice. I've found that it is called even if I click on the .tag element (witch is why removeTag is called twice) I don't know why and if I click on the .tag element, the target (inside the event object) is the first button of the list o_O !
  • Can you reproduce in Plunker?
  • I've found the problem... FYI label tag will click on the button so if you have any (click) attribute it'll fired twice.
  • Thank you for your reply, I've already tried to remove by index with splice but I have the same issue... :(
  • in that case something else is problem, this works for me