Don't load page yet until data are all retrieved from the service
<p>I am trying to display a simple data to the browser in Angular but I want to display the data once ALL data is retrieved from the service.  </p>

<p>How to do that?  </p>

<p>Currently the page will display even without finishing fetching my data.  </p>

<p>Here is sample codes</p>

<pre><code>In test.component.ts file

ngOnInit() {
    this._service.getQuestions().subscribe(data =&gt; { this.questionCollection = data });
}
</code></pre>

<p>In my Service</p>

<pre><code>getQuestions() {
    return this._http.get('assets/questions.json')
        .map(res =&gt; res.json())
        .catch(this.handleError);
}
</code></pre>

<p>.html file</p>

<pre><code>&lt;div&gt; Other text here...... &lt;/div&gt;
&lt;div *ngFor="let col of questionCollection"&gt;
    &lt;button type="button" class="btn btn-default"&gt;{{col.Text}}&lt;/button&gt;
&lt;/div&gt;
</code></pre>