ngFor object in click event

Question

I'm working on an application which shows a list of elements (with ngFor) which also have an "add" Button. When clicking on a button, the element should be shown in a separate list:

<ul>
    <li *ngFor="let trooper of impalasum">
        {{trooper.name}} <button id="btn_{{trooper.name}}" (click)="addToList({{trooper}})">Add</button>
    </li>
</ul> 
<hr>
<ul>
    <li>{{addedTrooper.name}} -> XY</li>
</ul>

addToList(troop: Trooper): void{
    this.addedTrooper = troop;
}

I want to have the trooper as a parameter in the click event, but this way it doesn't work. So how can I do that?

Answer 1

Don't use interpolation within output binding

(click)="addToList(trooper)"