title: How to get return values from http post method in Angular2?
body: <p>I have a requirement where I need to make a http post method request to a Web API i.e. save some data entered by the user. The Web API would return some values as a result and this result would be used for some UI logic. </p>
  
  <p>I tried making the http post in synchronous way, but it doesn't work properly as expected. </p>
  
  <p>Angular2 component calls this service to save the data:-</p>
  
  <pre><code>public SaveCubeReport(userName: any, cubeReport: CubeReportViewModel, APIServiceURL: any)
      {
          var result = this.SaveData(userName, cubeReport, APIServiceURL).subscribe(
              data =&gt; {
                  console.log(data);
              });
  
          console.log(result);
  }
  </code></pre>
  
  <p>Http post method call is as follows:-</p>
  
  <pre><code>SaveData(userName: any, cubeReport: CubeReportViewModel, APIServiceURL: any)
  {
      var temp = this._http.post(APIServiceURL, JSON.stringify(cubeReport), { headers: ContentHeaders })
          .map((res: Response) =&gt; res.json())
          .do(() =&gt; {
              console.log('request finished');
          });
      return res;
  }
  </code></pre>
  
  <p>Parent component where the angular2-modal popup is invoked.</p>
  
  <pre><code>var dialog = this.modal.open(SaveCubeReport, overlayConfigFactory(
  {
      ReportName: this.ReportItem.rpt_name,
      ReportDescription: this.ReportItem.rpt_description,
      Application: this.ReportItem.application_name,
      Owner: this.ReportItem.owner,
      CubeId: this.CubeId,
      ReportId: this.ReportItem.rpt_id,
      ReportJson: JSON.stringify(this.getState())
  }, BSModalContext));
  
  dialog
  .then((d) =&gt; d.result)
  .then((r) =&gt; {
      // success
      console.log("Dialog ended with success: ", r);
      this.RefreshReportListDropdown(r);
  }, (error) =&gt; {
      // failure 
      console.log("Dialog ended with failure: ", error);
  });
  </code></pre>
  
  <p>function from where the service call is made</p>
  
  <pre><code>RefreshReportListDropdown(savedReportName: any)
  {
      this._ClientAPIService.GetCubeReportsListByCubeWithEmptyRecord(this._SessionService.LoggedInUser, this._SessionService.SelectedApplication, this.cubeName, this._SessionService.ClientAPIServiceURL)
          .subscribe(
          (res) =&gt; {
              this.cubeReportList = res; //This result should contain all records including the recently saved data from the popup
              ....
          }
      );
  }
  </code></pre>
  
  <p>All my request are made a asynch requests i.e. it doesn't wait to get the return values.
  What is the mistake here?</p>