ngbModal as a generic Confrimation Box

Question

I am trying to create generic confirmation box using ngbmodal, which will be used across the App. In which, Title and message will be passed to the modal from the calling component. I created as a DialogService and added in the entryComponents. Now I am able to show the Confirmation box. But not able to get the result. Below is the code to show the ConfirmationBox component. How to get the value from it

    const modalRef = this.modalService.open(ConfirmationBoxComponent,{backdrop:"static"})
    modalRef.componentInstance.name = "Message";
    modalRef.componentInstance.confirmationBoxTitle = "Confirmation?"
    modalRef.componentInstance.confirmationmessage = "Do you want to cancel?"
    modalRef.componentInstance.changeRef.markForCheck();

score 15 · Accepted Answer · answered Apr 25 '17 at 15:07

There are many easy ways of achieving this but I would suggest one that is the simplest and the most effective IMO: resolve modal's result promise with the user's choice. This is as simple as doing following in the component representing modal's content (notice activeModal.close(...)):

<button (click)="activeModal.close(true)">Yes</button>
<button (click)="activeModal.close(false)">No</button>

Afterwards you can get back user's answer from the result promise of the NgbModalRef (notice modalRef.result.then):

open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.confirmationBoxTitle = 'Confirmation?';
    modalRef.componentInstance.confirmationMessage = 'Do you want to cancel?';

    modalRef.result.then((userResponse) => {
      console.log(`User's choice: ${userResponse}`)
    });        
  }

You can see all this in action in the following plunker: http://plnkr.co/edit/yYIx1m1e2nfK0nxFwYLJ?p=preview

ngbModal as a generic Confrimation Box

1 Answers1

Linked