title: Problems with loading data from API - want to use async/await instead
body: <p>From my component I'm calling on the method in the service which gets me a order from the API. </p>
  
  <p>My service:</p>
  
  <pre><code> getOrder(orderId: number): Observable&lt;Order&gt; {
   const url = `${this.ordersUrl}/getOrder?orderId=${orderId}&amp;country=${Cookie.get('country')}`;
   return this.http.get(url, {headers: this.headers}).map(response =&gt; response.json()).catch(this.errorService.handleError);
  </code></pre>
  
  <p>}</p>
  
  <p>My component:</p>
  
  <pre><code> ngOnInit() {
  this.sub = this.route.params.subscribe(params =&gt; {
    this.orderId = +params['orderId'];
    this.orderService.getOrder(this.orderId)
    .subscribe( order =&gt; {
      this.order = order;
      console.log(this.order.commentAdmin);},
      error =&gt; this.errorMessage = &lt;any&gt;error);
  });
  </code></pre>
  
  <p>When I load my template for my component with the data I get from "order" I get that the data is undefined. But if I console.log it, I get the correct response.
  I'm thinking that it loads the data before it loads the template and there is something that goes wrong there. I want to try and use async and await to get and show the data but I'm not sure how to do this. We've solved this problem by using delays since none of us have used Angular before. How can I do this correctly by using await and async?</p>