title: Angular2 *ngIf="afunctioncall()" results in the function being called 9 times
body: <p>I am working with Angular2 and want an element to conditionally display based upon the result of a function call.</p>
  
  <p>When I do this I've noticed that the function is called multiple times.</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;div *ngIf="returnsTrue()"&gt;
         &lt;h1&gt;World&lt;/h1&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    name:string;
    constructor() {
      this.name = 'Angular2'
    }
  
      returnsTrue(): boolean {
          console.log('Returning true');
          return true;
      }
  }
  </code></pre>
  
  <p>See associated plnkr:</p>
  
  <p><a href="http://plnkr.co/edit/MScwD3LaIj9YfBlwWltw?p=preview" rel="noreferrer">http://plnkr.co/edit/MScwD3LaIj9YfBlwWltw?p=preview</a></p>
  
  <p>The 'Returning true' console.log is output 4 times.</p>
  
  <p>Can anyone point me as to why this occurs?</p>
  
  <p>And is there anyway to avoid it?</p>
  
  <p>I've seen the following post however with it being related to Angular 1 and the digest cycle being re-written for Angular2 I'm not sure it's relevant:</p>
  
  <p><a href="https://stackoverflow.com/questions/35040151/ng-if-being-called-more-times-than-it-should">ng-if being called more times than it should</a></p>