title: Angular 2 model function interpolation - self.context.$implicit.X is not a function
body: <p>All,</p>
  
  <p>I am getting an error when trying to bind to a function on a model</p>
  
  <p>I have the following Component, Model &amp; Html (all fake for this example)</p>
  
  <pre><code>export class TestModel {    
    public getSomeValue(): string {
       return "Hello World";
    }
  }
  </code></pre>
  
  <p>Let's just assume the testModels property get's it's data somehow.</p>
  
  <pre><code>@Component(...)
  public class MyComponent {    
    public testModels: TestModel[];
  
    ngOnInit() {
      this.loadData();
    }
  
    public loadData(): void
    {
       this.http.get("...")
       .map(r=&gt;r.json as TestModel[]) // &lt;--- I think now you've asked the question, I see the problem on this line
       .subscribe(d=&gt;this.testModels = d);
  
    }
  }
  </code></pre>
  
  <p>Now in my html</p>
  
  <pre><code>&lt;div *ngFor="let testModel of testModels"&gt;
    &lt;span&gt;{{testModel.getSomeValue()}}&lt;/span&gt; &lt;!-- This fails --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the full error:</p>
  
  <blockquote>
    <p>error_handler.js:48 EXCEPTION: Error in
    ./MyComponent class MyComponent- inline template:94:56 caused by:
    self.context.$implicit.getSomeValue is not a function</p>
  </blockquote>
  
  <p>Is is not possible to bind to <code>.getSomeValue()</code> or am I doing this wrong?</p>
  
  <p>I'm assuming based on this <code>self.context.$implicit.</code> it's loosing it's context somehow and not calling the method on the model but attempting to call it on "it's self" what ever that is?</p>
  
  <p>Thanks</p>
  
  <p>S</p>
  
  <p>EDIT: Added code to show how testModels is instantiated</p>