Angular 4 passing a value from html template to a method in a component

Question

So I am having this issue on Angular 4.

I have this button in my html template markup:

<td><a class="btn btn-danger" (click)="delete()"><i class="fa fa-trash"></i></a></td>

I have the data assing to each td from a *ngFor, so I have the {{ data.id }} that I can use on this record, but how can I assign it to my delete method correctly, I tried using:

<td><a class="btn btn-danger" (click)="delete({{ data.id }})"><i class="fa fa-trash"></i></a></td>
<td><a class="btn btn-danger" (click)="delete(id)" [id]={{ data.id }}><i class="fa fa-trash"></i></a></td>

But none seem to work, so any advice or guidance would be greatly appreciated.

Answer 1

just pass data.id to delete function

  <td><a class="btn btn-danger" (click)="delete(data.id)"><i class="fa fa-trash"></i></a></td>

and then in your delete function

    delete(id : any){
console.log(id);
// perform your action
}