title: Don't load page yet until data are all retrieved from the service
body: <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>