title: angular 5: How do I wait for my service to finish and then proceed to the next task?
body: <p>I have a component in my angular5 application called: <code>product-list.component.ts</code>. In this component, I have a constructor, which calls a REST API.</p>
  <p><strong>product.service.ts</strong></p>
  <pre><code>getAllProductsFromACategory(categoryName: string): any {
  this.http.get('http://localhost:8080/VespaWebshopAPI
  /api/Article/Category?categoryName=' + categoryName).
  subscribe(data =&gt; {
  var article: Article = {
      id: data[0].id,
      name: data[0].name,
      articleNr: data[0].articleNr,
      stock: data[0].stock,
      price: data[0].price,
      description: data[0].description
    };
  
    return article;
  }); 
  </code></pre>
  <p><strong>product-list.component.ts</strong></p>
  <pre><code>public article: Article;
  
  constructor(private route: ActivatedRoute, 
  private productService: productService) { 
   //Call rest api
   this.article = 
   this.productService.getAllProductsFromACategory('Bremsen');
  }
  </code></pre>
  <p><strong>article.ts</strong></p>
  <pre><code>export interface Article {
  id : number;
  name : string;
  articleNr : string;
  stock : number;
  price : number;
  description : string;
  }
  </code></pre>
  <p>In my HTML, I want to display some properties of an article. So if I try to run this code in my <strong>product-list.component.html</strong> file, I get the following error:</p>
  <pre><code>{{ article.id }}
  </code></pre>
  <p><strong>Error</strong></p>
  <blockquote>
  <p>ProductListComponent.html:1 ERROR TypeError: Cannot read property
  'id' of undefined<br/>
  at Object.eval [as updateRenderer] (ProductListComponent.html:1)<br/>
  at Object.debugUpdateRenderer [as updateRenderer] (core.js:14727)<br/>
  at checkAndUpdateView (core.js:13841)<br/>
  at callViewAction (core.js:14187)<br/>
  at execComponentViewsAction (core.js:14119)<br/>
  at checkAndUpdateView (core.js:13842)<br/>
  at callViewAction (core.js:14187)<br/>
  at execEmbeddedViewsAction (core.js:14145)<br/>
  at checkAndUpdateView (core.js:13837)<br/>
  at callViewAction (core.js:14187)<br/></p>
  </blockquote>
  <p>The REST API works; I tested it. I guess there is just the problem that the data should get loaded first before the HTML page gets displayed. Somewhere else I read that in an <code>ngFor</code>, I should make use of the | async pipe, but that didn't work for me.</p>
  <p>So how do I solve this?</p>