Angular2 *ngIf="afunctioncall()" results in the function being called 9 times
<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>