title: Angular2 - Waiting for observable to return with data
body: <p>Angular2 templates seem to be fine with waiting for a list to return from an observable like this: </p>
  
  <pre><code> &lt;li *ngFor="let product of products"&gt;
         {{product.DisplayProductName}}
   &lt;/li&gt;
  ...
  export class PublicProductListComponent  {
      errorMessage: string;
      products: Products[];
      mode = 'Observable';
  
      constructor(private productService: ProductService) { }
  
      ngOnInit() { this.getPublicProducts(); }
  
      getPublicProducts() {
          this.productService.getPublic()
              .subscribe(
              products =&gt; this.products = products,
              error =&gt; this.errorMessage = &lt;any&gt;error);
      }
  }
  </code></pre>
  
  <p>But when I tried to do the same thing with an object (<code>userDash</code>), I got errors saying the object was undefined because it wasn't waiting for the subscription to find data:</p>
  
  <pre><code>&lt;li *ngFor="let prod of userDash.OwnedProducts"&gt;
      {{prod.DisplayProductName}}
  &lt;/li&gt;
  ...
  export class OwnedProductListComponent {
      errorMessage: string;
      userDash: UserDashboard;
      mode = 'Observable';
  
      constructor(private userService: UserService) { }
  
      ngOnInit() { this.getUserDashboard(); }
  
      getUserDashboard() {
          this.userService.getUserDashboard()
              .subscribe(
              dashboard =&gt; this.userDash = dashboard,
              error =&gt; this.errorMessage = &lt;any&gt;error);
      }
  
  }
  </code></pre>
  
  <p>Doing a null/undefined check seems to work but I can't figure out if it's the most angular way to do it.</p>
  
  <pre><code>&lt;ul *ngIf="userDash"&gt;
     &lt;li *ngFor="let dash of userDash.OwnedProducts"&gt;
        {{dash.DisplayProductName}}
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm still brand new trying to learn this pattern, so please forgive my ignorance. </p>
  
  <p>EDIT --- Here's the code for <code>getUserDashboard()</code></p>
  
  <pre><code>getUserDashboard(): Observable&lt;UserDashboard&gt; {
  
         return this.http.get(siteSettings.apiURL + "user/" + this.authService.getClientID() + "/dashboard", this.authService.getAuthorizationHeaders())
              .map(function (res: Response) {
                  let body = res.json();
                  return body;                
              })
              .catch(this.handleError);            
      }
  </code></pre>