Angular 2 - Interpolation and binding with async http request
<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>