how to resolve a function only when model window return promise in angular 2?

Question

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.

the html code is:

   <div>
      <h2>Hello {{name}}</h2>
       <button (click)="OnAgeAYear()">click me</button>
   <div bsModal #getRichModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="hideChildModal()">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Child modal</h4>
      </div>
      <div class="modal-body">
        getRich quick
      </div>
      <button type="button" class="btn btn-primary" (click)="confirmGetRichYes()" >YES</button>
      <button type="button" class="btn btn-primary" (click)="confirmGetRichNo()" >NO</button>
    </div>
  </div>
</div>
</div>

button click function:

 OnAgeAYear() {
    //this.getRichModal.show();
    this.fateGetRichQuick()
       .then(
         result=>{
             console.log("promise returned: " + result);
             return this.fateCharity();
           },
         error=> console.log(error))
       .then(
         result=>{
           console.log("promise returned: " + result);
           return this.fateMarriage();
        }).then(
          result=>{
            console.log("promise returned: " + result);
            return this.fateMarriage();
          }
        )
     .catch(error => {
        console.log("generic cach "+error); // will be called if getUser or getRights fails
      })}

3 functions are:

  fateGetRichQuick(): Promise<any>{

   var modal = this.getRichModal;  
    return new Promise<any>(function (resolve, reject) {
      var n= 1;
      modal.show();  
      // I want to resolve this promise only when user clicked yes or no.
    });}
    fateCharity(): Promise<any> {
    return new Promise<any>(function (resolve, reject) {
      resolve("fateCharity-Resolve");
    })}
    fateMarriage(): Promise<any> {
    return new Promise<any>(function (resolve, reject) {
      resolve("fateMarriage - Resolve");
    })}

and on modal window I have following functions:

confirmGetRichYes(): Promise <boolean>{
alert("it is yes....");
this.hideChildModal();
return Promise.resolve(true);}


confirmGetRichNo(): Promise <boolean>{
alert("it is no....");
this.hideChildModal();
return Promise.resolve(false);}


hideChildModal(){
this.getRichModal.hide();}

So on confirmGetRichYes i want resolve the fateGetRichQuick promise but modal window dose not block the function fateGetRichQuick but continue its flow.

I have running code on plunker : http://plnkr.co/edit/nX1LcNJeuQvuWSloF50l

What `getUser` and `getRights` is that comment talking about? — Bergi, Sep 13 '16 at 11:39
Where's the asynchronous thing that you want to wait for in your code? The whole thing runs down synchronously as written, and you wouldn't even need to use promises anywhere. — Bergi, Sep 13 '16 at 11:40
i want it to stop on `this.getRichModal.show();` and when user will take action on modal window then only `this.fateCharity()` should run. — purva deshpande, Sep 14 '16 at 06:21
Then you should get a promise for the action (i.e. one that resolves when the button is clicked) and wait for that — Bergi, Sep 14 '16 at 09:20
thanks for reply. i have updated my code in fateGetRichQuick function to make my query more clear. please take look of updated question. so I want to resolve fateGetRichQuick only when modal window is answered by user. — purva deshpande, Sep 15 '16 at 09:10
And can you please give some sample code or example for my question? it will be really helpful. — purva deshpande, Sep 15 '16 at 09:48

score 0 · Answer 1 · answered Dec 28 '16 at 11:19

you can show my example

confirm.component.ts

import { OnInit, Component } from '@angular/core';
import { NgModule } from '@angular/core';

import { ConfirmService, CONFIRMSERVICE } from './confirmservice.service';
import {KeyBoardKeysData} from "../../model/commun/keyboardkeys.data";

declare var $: any;

@Component({
    selector: 'modal-confirm',
    template: `
<div class="modal" id="confirmationModal" data-keyboard="false" data-backdrop="false">
    <div class="modal-body">
        <div class="modal-header">
            <button type="button" id="closeButtonModal" class="close" ><span aria-hidden="true">&times;</span><span
                    class="sr-only">Close</span></button>


             <h5>{{title}}</h5>
        </div>
        <div class="modal-container">
             <p>{{message}}</p>
        </div>
        <div class="modal-footer">

           <button class="btn btn-primary" id="okButton">
                            {{okText}}
                        </button>
                        <button class="btn" id="cancelButton">
                            {{cancelText}}
                        </button>

        </div>
    </div><!-- /.modal-body -->
</div><!-- /.modal -->


        `
})
export class ConfirmComponent implements OnInit {

    private _defaults = {
        title: 'Confirmation',
        message: 'Do you want to cancel your changes?',
        cancelText: 'Cancel',
        okText: 'Ok'
    };
    title: string;
    message: string;
    okText: string;
    cancelText: string;
    isConfirm: boolean = true;

    private _confirmElement: any;
    private _cancelButton: any;
    private _okButton: any;
    private _closeButtonModal: any;

    constructor(confirmService: ConfirmService) {
        confirmService.activate = this.activate.bind(this);
    }

    _setLabels(message = this._defaults.message, title = this._defaults.title) {
        this.title = title;
        this.message = message;
        this.okText = this._defaults.okText;
        this.cancelText = this._defaults.cancelText;
    }

    activate(message = this._defaults.message, title = this._defaults.title, confirm?: boolean): Promise<boolean> {
        console.log('Displays confirmation dialog');
        if (confirm) {
            this.isConfirm = true;
            this._cancelButton.style.display = 'inline-block';
            this.okText = 'Ok';
        } else {
            this.isConfirm  = false;
            this._cancelButton.style.display = 'none';
            this.okText = 'Cancel';
        }
        this._setLabels(message, title);
        let promise = new Promise<boolean>(resolve => {
            this._show(resolve);
        });
        return promise;
    }

    private _show(resolve: (boolean) => any) {
        document.onkeyup = null;

        if (!this._confirmElement || !this._okButton) return;

        window.setTimeout(() => $('#confirmationModal').modal('show'), 50);

        this._cancelButton.onclick = this._closeButtonModal.onclick = ((e: any) => {
            e.preventDefault();
            console.log('Confirm: click cancel');
            resolve(false);
            this._hideDialog();
        });

        this._okButton.onclick = ((e: any) => {
            e.preventDefault();
            console.log('Confirm: click ok');
            resolve(true);
            this._hideDialog();
        });

        document.onkeyup = (e: any) => {
            if (e.which == KeyBoardKeysData.ESCAPE) {
                this._hideDialog();
                return resolve(false);
            }
        };
    }

    private _hideDialog() {
        window.setTimeout(() => $('#confirmationModal').modal('hide'), 0);
    }

    ngOnInit(): any {
        this._confirmElement = document.getElementById('confirmationModal');
        this._cancelButton = document.getElementById('cancelButton');
        this._okButton = document.getElementById('okButton');
        this._closeButtonModal = document.getElementById('closeButtonModal');

    }
}

@NgModule({
  declarations: [ConfirmComponent],
  providers: [CONFIRMSERVICE],
  exports: [ConfirmComponent]
})
export class ConfirmModule {

}

confirmservice.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class ConfirmService {
  activate: (message?: string, title?: string, confirm?: boolean) => Promise<boolean>;
  register() {

  }
}

export const CONFIRMSERVICE: any[] = [
    ConfirmService,

]

add in your page html page

<modal-confirm id="modalConfirm" #modalConfirm    tabindex="0">
</modal-confirm>

and you can call it like that

this.confirmService.activate('Are you sure to delete ?', 'Delete?', true).then(diagRes => {

  console.info('confirmService activate',diagRes);

  if(diagRes) {

    this.confirmService.activate('Player has been deleted', 'Information').then(daigRes2 => {
      // Another result…
    });


  }
});

hope my example help you

how to resolve a function only when model window return promise in angular 2?

1 Answers1