title: Angular: Call a function within the interpolation brackets
body: <p>In my Angular Project i have an class A: </p>
  
  <pre><code>export class A {
      id: number;
  
      public displayName(): string{
         return "a";
      }
  </code></pre>
  
  <p>In my component i have an array of type A, so the component.ts has the line:</p>
  
  <pre><code>arrayOfAs: Array&lt;A&gt;;
  </code></pre>
  
  <p>In the component.html i just want to display the number and the result of the string function in a ngFor-loop:</p>
  
  <pre><code>&lt;div *ngFor="let element of arrayOfAs"&gt;
      {{element.id}}, {{element.displayName()}}
  &lt;/div&gt;
  </code></pre>
  
  <p>the id can be displayed, but for the function i get the error: </p>
  
  <p>TypeError: _v.context.$implicit.displayName is not a function</p>
  
  <p>How can i use a function inside the interpolation?</p>
  
  <p>Obviously this is just a shortend version of my real case. Thanks</p>