title: How to call a function from a template exactly once?
body: <p>I use a function call inside an angular2 template. The function itself performs a http network request using http.get(), and returns an Observable  of any[] that is actually a css style object:</p>
  
  <pre><code>@Component({
      selector: "test-component",
      template: `&lt;div *ngFor="let item of items" [ngStyle]="lookupStyle(item)"; }} &lt;/div&gt;",
  })
  @Injectable()
  export class TestComponent {
  
      @Input()
      items: Array&lt;any&gt;; 
  
      lookupStyle(params: any): Observable&lt;any&gt; {
          return this.http.get(/* ... */).map(/* ... */);
      }
  
      constructor(private http: Http) {}
  }
  </code></pre>
  
  <p>But the above code <strong>will trigger an infinite loop</strong>! The function <code>lookupStyle</code> is evaluated every time angular2 change detection takes place. Since <code>http.get()</code> will trigger a change-detection run, the function <code>lookupStyle</code> is re-evaluated after the http request complete - there is your infinite loop.</p>
  
  <p>Is there a solution or a better way in which i could tell angular to evaluate the function <code>lookupStyle</code> only once? Now, I know I could probable come up with some <code>.zip/.combineLatest</code> magic on my viewmodel, but this seems overkill and would prodouce a lot of additional code - thats why I am looking for a better way.</p>