title: Angular 4 call a function within a <td>
body: <p>I have this piece of code:</p>
  
  <p><strong>personListComponent.html</strong>
  </p>
  
  <pre><code>&lt;tr *ngFor="let person of personService.getPersons()"&gt;
        &lt;td (onShow)="getCountry(person)"&gt;{{person.name}}&lt;/td&gt;
        &lt;td&gt;{{country}}
  &lt;/tr
  </code></pre>
  
  
  
  <p><strong>personListComponent.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>country : string = '';
  
  getCountry(person : Person){
    this.country = this.countryservice.getCountry(person.countryid);
  }
  </code></pre>
  
  <p>I want to get the country from the person and show it in the table, however <code>(onShow)</code> never calls <code>getCountry()</code> function.
  Is there a way to call this function from within the <code>&lt;td&gt;</code> element? Or any way to show the country?</p>