Angular (2+): continue running upon result from modal dialog

The following code is ts + html 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-box.component.html',
styleUrls: ['./confirm-box.component.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;

return this.result;
});
}
/********************************************************************/
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.

Thank you, Zvika

Continue reading...