title: Wait for async data to load before rendering component view
body: <p>I'm struggling with the <code>async</code> pipe, I need to wait for the async data to finish loading before trying to render the view of the component. </p>
  
  <p>I tried looking at this question where the elvis operator is mentioned:</p>
  
  <p><a href="https://stackoverflow.com/questions/34731869/wait-for-angular-2-to-load-resolve-model-before-rendering-view-template">Wait for Angular 2 to load/resolve model before rendering view/template</a></p>
  
  <p>I tried it like <code>{{model?['name']}}</code> but it doesn't seem to do anything because angular stills throws an error complaining about not being able to read <code>name</code> of <code>undefined</code>.</p>
  
  <p>I initialize the <code>model</code> on <code>ngOnInit</code> but the data hasn't finished loading at this point (I think):</p>
  
  <pre><code>ngOnInit() {
  
    // If no model is set and the select shouldn't be allowed empty, set the model to the first option
    if (!this.model &amp;&amp; !this.allowEmpty) {
      this.model = this.options[0];
    }
    // If it should be allowed empty, set it to null which will add an empty class in the markup
    else if (this.allowEmpty) {
      this.model = null;
    }
  
    this.onModelChange.emit(this.model);
  }
  </code></pre>
  
  <p>Then it tries to render this bit prematurely:</p>
  
  <pre><code>&lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;div&gt;{{model?['name']}}&lt;/div&gt;
        &lt;ul&gt;
          &lt;li *ngFor="let option of options | async"&gt;{{option['name']}}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So what would be the correct way of achieving this? Can I set something in the component class to allow async data to finish loading before rendering the view?</p>