how to resolve a function only when model window return promise in angular 2?
<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>