The following code is for modal dialog component. I want it to act like "confirm". Running will proceed only after clicking 'yes' (return true) or 'no' (return false) in the dialog.

import { Component, OnInit } from '@angular/core';
import {SharedobjectService} from 'src/app/service/sharedobject.service';

@Component({
  selector: 'app-confirm-box',
  templateUrl: './confirm-boxponent.html',
  styleUrls: ['./confirm-boxponent.scss']
})
export class ConfirmBoxComponent implements OnInit {

  display: boolean = false;
  messageText: string;
  result : boolean;

  constructor(private sharedObject: SharedobjectService) { 
    this.sharedObject.confirmBox = this;
  }

  /********************************************************************/
  showDialog(msg : string) : Promise<boolean> {
    return new Promise((resolve, reject) => {
      this.display = true;
    
      resolve (true);
    });
  }
  /********************************************************************/
  public onApprove () 
  {
    this.result = true;
  }

  /********************************************************************/
  public onCancel () 
  {
    this.result = false;
  }

  /********************************************************************/
  ngOnInit() {
    console.log ('ConfirmBoxComponent ngOnInit');
  }

}

<p-dialog modal='true' [(visible)]="display">
    <div class="p-grid p-dir-col">
        <label>{{ messageText }}</label>
        <br/>
        <div class="p-grid p-align-center p-nogutter">
            <button class="btn btn--primary col1" (click)="onApprove()">Yes</button>
            <button class="btn btn--primary col1" ngbAutofocus (click)="onCancel();">No</button>
        </div>
    </div>
</p-dialog>

In the parent component:

//Do something ...
let resp : boolean = await this.showDialog ('Hello');
//Continue ... 
if (resp==true)  //User clicked 'yes'
{
   
}

Currently I do not know how 'OnApprove' will cause the modal dialog to close with resp=true.

The following code is for modal dialog component. I want it to act like "confirm". Running will proceed only after clicking 'yes' (return true) or 'no' (return false) in the dialog.

import { Component, OnInit } from '@angular/core';
import {SharedobjectService} from 'src/app/service/sharedobject.service';

@Component({
  selector: 'app-confirm-box',
  templateUrl: './confirm-boxponent.html',
  styleUrls: ['./confirm-boxponent.scss']
})
export class ConfirmBoxComponent implements OnInit {

  display: boolean = false;
  messageText: string;
  result : boolean;

  constructor(private sharedObject: SharedobjectService) { 
    this.sharedObject.confirmBox = this;
  }

  /********************************************************************/
  showDialog(msg : string) : Promise<boolean> {
    return new Promise((resolve, reject) => {
      this.display = true;
    
      resolve (true);
    });
  }
  /********************************************************************/
  public onApprove () 
  {
    this.result = true;
  }

  /********************************************************************/
  public onCancel () 
  {
    this.result = false;
  }

  /********************************************************************/
  ngOnInit() {
    console.log ('ConfirmBoxComponent ngOnInit');
  }

}

<p-dialog modal='true' [(visible)]="display">
    <div class="p-grid p-dir-col">
        <label>{{ messageText }}</label>
        <br/>
        <div class="p-grid p-align-center p-nogutter">
            <button class="btn btn--primary col1" (click)="onApprove()">Yes</button>
            <button class="btn btn--primary col1" ngbAutofocus (click)="onCancel();">No</button>
        </div>
    </div>
</p-dialog>

In the parent component:

//Do something ...
let resp : boolean = await this.showDialog ('Hello');
//Continue ... 
if (resp==true)  //User clicked 'yes'
{
   
}

Currently I do not know how 'OnApprove' will cause the modal dialog to close with resp=true.

• angular
• promise
• rxjs
• modal-dialog

• return new Promise((resolve, reject) => { return ... }) you need to replace the return x; with resolve(x); – Pieterjan Commented Mar 25 at 19:29
• Pieterjan - Thank you very much. I tried your code and updated here. The resolve (x) causes running to proceed without any click on yes/no. – Zvi Vered Commented Mar 26 at 3:53

1 Answer 1

Try a subject called result, then emit the new subject value when any of the buttons are pressed. We can subscribe to the subject inside the promise. We use take(1) so that the subscription ends on the first emissions, else it will continue running.

import { Component, OnInit } from '@angular/core';
import {SharedobjectService} from 'src/app/service/sharedobject.service';

@Component({
  selector: 'app-confirm-box',
  templateUrl: './confirm-boxponent.html',
  styleUrls: ['./confirm-boxponent.scss']
})
export class ConfirmBoxComponent implements OnInit {

  display: boolean = false;
  messageText: string;
  result: Subject<boolean> = new Subject<boolean>();

  constructor(private sharedObject: SharedobjectService) { 
    this.sharedObject.confirmBox = this;
  }

  /********************************************************************/
  showDialog(msg : string) : Promise<boolean> {
    return new Promise((resolve, reject) => {
      this.display = true;
      this.result.pipe(take(1)).subscribe((_result: boolean) => {    // <- changed here!
        resolve(_result);                                       // <- changed here!
      });                                                       // <- changed here!
    });
  }
  /********************************************************************/
  public onApprove () 
  {
    this.result.next(true);             // <- changed here!
  }

  /********************************************************************/
  public onCancel () 
  {
    this.result.next(false);            // <- changed here!
  }

  /********************************************************************/
  ngOnInit() {
    console.log ('ConfirmBoxComponent ngOnInit');
  }

}

You can also simplify the code even further using firstValueFrom to convert the observable stream to a promise.

  showDialog(msg : string) : Promise<boolean> {
    return firstValueFrom(this.result.pipe(take(1)));
  }