Using *ngFor values in component method - html

Question

hey im trying to get the id value from *ngFor loop into a method in my component in order to delete a specific object
my code looks like that:
html:
<tr *ngFor="let c of myCompanyArray">
<td>{{c.id}}</td>
<td>{{c.companyName}}</td>
<td>{{c.password}}</td>
<td>{{c.email}}</td>
<td>
<a href="" class="tooltip">
<i class="fas fa-user-edit"></i>
<span class="tooltiptext">edit company</span>
</a>
</td>
<td>
<a class="tooltip" >
<i class="far fa-trash-alt" (click)="sendIdForDelete({{c.id}})"></i>
<span class="tooltiptext">delete company</span>
</a>
</td>
</tr>
Component:
sendIdForDelete(compid){
console.log("company id is : " + compid.value);
///this.dataService.deleteCompany(compid.value);
}
what ever syntax i tried inside (click)="sendIdForDelete({{c.id}}) or (click)="sendIdForDelete(c.id)" i always get undefined
really appreciate your help thanks

Answer 1

You should call sendIdForDelete(c.id) in you'r html and change you'r method in you'r component like below
sendIdForDelete(compid: number){
console.log("company id is : " + compid);
}
In this case you are passing id ( which is number or string ) to you'r component (.ts file ) and you'r function (sendIdForDelete) should get just an id.
Now you can do anything with the corresponding id in function.

Answer 2

You should not use interpolation in your template, just do without {{}},
<i class="far fa-trash-alt" (click)="sendIdForDelete(c.id)"></i>
and inside TS do not use value, because you are already passing a number,
sendIdForDelete(compid:any){
console.log("company id is : " + compid);
}