title: Angular 2 how to handle asynchronous calls
body: <p>First time button is clicked in form undefined is return, button has to be clicked twice to return correct result. How do I not process until result is return. When button clicked return correct result not previous one?</p>
  
  <p>Product.componet.html</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;div *ngIf="submitted"&gt;
      &lt;h2&gt;Product found&lt;/h2&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-3"&gt;Price&lt;/div&gt;
          &lt;div class="col-xs-9  pull-left"&gt;Product details&lt;/div&gt;
          &lt;div class="col-xs-3"&gt;{{ product.price }}&lt;/div&gt;
          &lt;div class="col-xs-9  pull-left"&gt;{{product.description}}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div *ngIf="result"&gt;
      &lt;h2&gt;No Product found&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Product.compontent.ts</p>
  
  <pre class="lang-typescript prettyprint-override"><code>onSubmit() {
      if (this.formModel.valid) {
          this.submitted = false;
          this.result = false;
  
          lens id = this.formModel.controls['id'].value;
  
          this.productService.getProductOne(id)
              .subscribe(product =&gt; this.product = product)
  
          //Check to see if object undefined
          if (this.product) {                
              if (this.product.id != 0)
              {
                  this.submitted = true;
              }
              else    
              {
                  this.result = true;
              }                
          }
      }
  }
  </code></pre>
  
  <p>product-service.ts</p>
  
  <pre class="lang-typescript prettyprint-override"><code>  getProductOne(id: number): Observable&lt;Product&gt; {
        // Parameters obj
        let params: URLSearchParams = new URLSearchParams();
        params.set('id', id.toString());
  
        //Http request
        return this.http
            .get("api/getProduct", {
                search: params
            })
            .map(response =&gt; response.json())
            .catch(handleError);
    }
  </code></pre>
  
  <p>Web api – ProductController.cs   </p>
  
  <pre class="lang-csharp prettyprint-override"><code> [Route("api/getProduct")]
      public Product GetProduct(int id)
      {
          var product = products.FirstOrDefault((p) =&gt; p.id == id);
  
          if (product == null)
          {
              product = new Product();
          }
  
          return product;
      }
  </code></pre>