title: Angular 2 - Interpolation and binding with async http request
body: <p>I'm new to Angular 2 and I'm facing a problem with async http request and binding with interpolation.</p>
  
  <p>Here's my component:</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
    selector: 'info',
    template: `&lt;h1&gt;{{model.Name}}&lt;/h1&gt;`
  })
  export class InfoComponent implements OnInit {
  
      model: any;
  
      constructor(
          private _service: BackendService
      ) { }
  
      ngOnInit() {
           if (this.model == null) {
              this._service.observableModel$.subscribe(m =&gt; this.model = m);
              this._service.get();
          }     
      }
  }
  </code></pre>
  
  <p>When the template is rendered I get an error because "model" is not set yet.</p>
  
  <p>I solved the problem with this very ugly hack:</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
      selector: 'info',
      template: `
    &lt;template ngFor #model="$implicit" [ngForOf]="models | async"&gt;
    &lt;h1&gt;{{model.Name}}&lt;/h1&gt;
    &lt;/template&gt;
    `
  })
  export class NeadInfoComponent implements OnInit {
  
      models: Observable&lt;any&gt;;
  
      constructor(
          private _service: BackendService
      ) { }
  
      ngOnInit() {
           if (this.models == null) {
              this._service.observableModel$.subscribe(m =&gt; this.models = Observable.of([m]));
              this._service.get();
          }     
      }
  }
  </code></pre>
  
  <p>My question is: how to defer the template rendering until my http call is completed or how interpolate the "model" values directly in template without binding to another component?</p>
  
  <p>Thanks!</p>