title: Calling typescript getter in angular2
body: <p>I would like to call a typescript property from angular2 template. I can't do that if I call the property of an object in a loop. If there is no loop, the code works fine.</p>
  
  <p><a href="https://stackoverflow.com/q/37385535/124797">Calling method from a Angular 2 class inside template</a> this question addresses the problem if there is no loop.  </p>
  
  <p>Please find the Plunker <a href="https://plnkr.co/edit/c8uY12?p=preview" rel="nofollow noreferrer">here</a> .  </p>
  
  <pre><code>import {Component} from '@angular/core'
  
  export class User {
    id: number;
    mail: string;
    created_at: string;
    first_name: string;
    last_name: string;
    deleted_at: any;
  
   // if I call {{user.name}} nothing gets printed.
   get name() {
      return "My name is:" + this.first_name;
    }
  }
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;ion-list *ngFor="let user of users"&gt;
          &lt;div&gt;{{user.first_name}}&lt;/div&gt;
      &lt;/ion-list&gt;
    `
  })
  export class App {
    users: User[];
    constructor() {
      this.users = [ {first_name:"Jagan"}, {first_name:"Nath"}  ];
    }
  }
  </code></pre>
  
  <p><strong>Update</strong>   </p>
  
  <p>Here is a piece of code. Both working and not working version is given below.</p>
  
  <pre><code>//our root app component
  import {Component, Input} from '@angular/core'
  import { MyComponent } from './my-component';
  
  
  export class User {
  
    first_name : string;
  
    get name() {
      return "Name:" + this.first_name;
    }
  }
  
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
         {{user.first_name}}
      &lt;/div&gt;
    `,
    directives: [ MyComponent ]
  })   
  
  export class App {
  
    constructor() {
      let str = "{ \"first_name\" : \"Jagan\" }";
      this.user = JSON.parse(str) as User;
    }
  }
  </code></pre>
  
  <p>// <strong>This does not work.</strong></p>
  
  <pre><code> /* @Component({
        selector: 'my-app',
        template: `
          &lt;div&gt;
             {{user.name}}
          &lt;/div&gt;
        `,
        directives: [ MyComponent ]
      })
      */
  </code></pre>