CODEWITHSUNDEEP
htmlangulartypescript
Rohr Facu
Rohr Facu

Reputation: 737

Angular 4 call a function within a <td>

I have this piece of code:

personListComponent.html 

<tr *ngFor="let person of personService.getPersons()">
      <td (onShow)="getCountry(person)">{{person.name}}</td>
      <td>{{country}}
</tr

personListComponent.ts

country : string = '';

getCountry(person : Person){
  this.country = this.countryservice.getCountry(person.countryid);
}

I want to get the country from the person and show it in the table, however (onShow) never calls getCountry() function. Is there a way to call this function from within the <td> element? Or any way to show the country?

Upvotes: 2

Views: 9207

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222592

Without using ngShow , you can directly evaluate a function inside the td as follows,

<tr *ngFor="let person of personService.getPersons()">
      <td>{{person.name}}</td>
      <td>{{getCountry(person) | async}}
</tr>

and the function as

getCountry(person : Person){
  return  this.countryservice.getCountry(person.countryid);
}

Upvotes: 5

Related Questions