title: how do you wait for data to load before view in angular 2
body: <p><strong>Component:</strong></p>
  
  <pre><code>export class HomeComponent implements OnInit {
  
    tridentData: TridentData;
  
    constructor(private tridentServices: TridentService) { }
  
    ngOnInit() {
      this.tridentServices.getTridentData()
                      .subscribe(
                        (data: TridentData) =&gt; {
                          this.tridentData = data;
                        }
                      )
    }
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;h1&gt;{{ tridentData }}&lt;/h1&gt;   &lt;---results in undefined
  </code></pre>
  
  <p><strong>The Problem:</strong></p>
  
  <p>I am calling <code>getTridentData()</code> (A <code>GET</code> request, that returns json) on my <code>tridentData</code> object. I am having a ASYNC problem where the view loads before my <code>tridentData</code> object can retrieve the data the db. This results tridentData in undefined and my whole page breaks. How do I implement a loading animation and have the view wait for the data to load before popping in?</p>