CODEWITHSUNDEEP
htmlangularngfor
אוראל הינדי
אוראל הינדי

Reputation: 89

Using *ngFor values in component method

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

Upvotes: 1

Views: 393

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222522

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);
}

Upvotes: 0

Arash
Arash

Reputation: 1826

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.

Upvotes: 3

Related Questions