title: how to resolve a function only when model window return promise in angular 2?
body: <p>on button click I have 3 function which are called in promise one after another. In first function I want blocked model window on which it will return me a promise and on that promise I will resolve next function.</p>
  
  <p>the html code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
         &lt;button (click)="OnAgeAYear()"&gt;click me&lt;/button&gt;
     &lt;div bsModal #getRichModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-sm"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" aria-label="Close" (click)="hideChildModal()"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Child modal&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          getRich quick
        &lt;/div&gt;
        &lt;button type="button" class="btn btn-primary" (click)="confirmGetRichYes()" &gt;YES&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary" (click)="confirmGetRichNo()" &gt;NO&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>button click function:</p>
  
  <pre><code> OnAgeAYear() {
      //this.getRichModal.show();
      this.fateGetRichQuick()
         .then(
           result=&gt;{
               console.log("promise returned: " + result);
               return this.fateCharity();
             },
           error=&gt; console.log(error))
         .then(
           result=&gt;{
             console.log("promise returned: " + result);
             return this.fateMarriage();
          }).then(
            result=&gt;{
              console.log("promise returned: " + result);
              return this.fateMarriage();
            }
          )
       .catch(error =&gt; {
          console.log("generic cach "+error); // will be called if getUser or getRights fails
        })}
  </code></pre>
  
  <p>3 functions are:</p>
  
  <pre><code>  fateGetRichQuick(): Promise&lt;any&gt;{
  
     var modal = this.getRichModal;  
      return new Promise&lt;any&gt;(function (resolve, reject) {
        var n= 1;
        modal.show();  
        // I want to resolve this promise only when user clicked yes or no.
      });}
      fateCharity(): Promise&lt;any&gt; {
      return new Promise&lt;any&gt;(function (resolve, reject) {
        resolve("fateCharity-Resolve");
      })}
      fateMarriage(): Promise&lt;any&gt; {
      return new Promise&lt;any&gt;(function (resolve, reject) {
        resolve("fateMarriage - Resolve");
      })}
  </code></pre>
  
  <p>and on modal window I have following functions:</p>
  
  <pre><code>confirmGetRichYes(): Promise &lt;boolean&gt;{
  alert("it is yes....");
  this.hideChildModal();
  return Promise.resolve(true);}
  
  
  confirmGetRichNo(): Promise &lt;boolean&gt;{
  alert("it is no....");
  this.hideChildModal();
  return Promise.resolve(false);}
  
  
  hideChildModal(){
  this.getRichModal.hide();}
  </code></pre>
  
  <p>So on confirmGetRichYes i want resolve the fateGetRichQuick promise but modal window dose not block the function fateGetRichQuick but continue its flow.</p>
  
  <p>I have running code on plunker : <a href="http://plnkr.co/edit/nX1LcNJeuQvuWSloF50l" rel="nofollow">http://plnkr.co/edit/nX1LcNJeuQvuWSloF50l</a></p>