title: Asynchronous behavior of Observable causing variable to be undefined
body: <p>I created a Service in Angular2 which is responsible for making REST call to java services and get Array of products using HTTP Observable.</p>
  
  <pre><code>getAll(): Observable&lt;Product[]&gt;{
      let data$ = this.http
          .get(`${this.baseUrl}/productdata`, {headers: this.getHeaders()})
          .map(mapData)
          .catch(handleError);
      console.log(' object array:' , data$)
      return data$;
  }
  </code></pre>
  
  <p>I have then written a subscriber for this Observable in my component and placed inside the ngOnInit() method and wanted to just extract the first <strong>product</strong> so placed inside ngOnInit().</p>
  
  <blockquote>
    <p>this.product = this.products[0];</p>
  </blockquote>
  
  <pre><code>ngOnInit() {
   this.productService
          .getAll()
          .subscribe(
              /* happy path */ p =&gt; this.products = p,
              /* error path */ e =&gt; this.errorMessage = e,
              /* onComplete */ () =&gt; this.isLoading = false);
  this.product = this.products[0];
  }
  </code></pre>
  
  <p>But the last operation in OnInit method is causing <strong>produc</strong>t to be undefined because of the asynchronous behavior of Observable. Similarly, I am not able to use the property of <strong>product</strong> to interpolate in HTML component. 
  I want the extraction to be automatic. So can you provide me a way to do that? </p>