title: Why I can't call a member function inside ngFor?
body: <p>I have:</p>
  
  <pre><code>export class Foo {
      id: number;
      name: string;
  
      public formatName() : string {
          return this.name;
      }
  }
  </code></pre>
  
  <p>And in the template:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let foo of allFoos"&gt;
      &lt;strong&gt;{{foo.formatName()}}&lt;/strong&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Why this doesn't work? I'll just get <code>node_modules/@angular/core/bundles/core.umd.js:3076 TypeError: self.context.$implicit.formatName is not a function</code></p>
  
  <p>I can work around this by moving the <code>formatName()</code> function to the parent Component and give <code>foo</code> as an argument instead of using <code>this</code>, but it's not what I want:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let foo of allFoos"&gt;
      &lt;strong&gt;{{formatName(foo)}}&lt;/strong&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Accessing e.g. foo.name directly in the loop also works just fine:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let foo of allFoos"&gt;
      &lt;strong&gt;{{foo.name}}&lt;/strong&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Obviously my intention is to have a much more complex <code>formatName()</code> than the one in my example.</p>