Q:

Angular 2 click fired multiple times inside ngFor

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.

A:

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. 

