How do I wait for response from an Angular bootstrap modal window before executing next function?

Question

I am trying to create a proof window for the user to validate their input before committing their data into the db.

The bootstrap modal window works, but if I put the func x() in line on the (click)= for the button, the x() executes while the modal is displayed.

The other difficulty is I am trying to use the modal window for three potential db update requests (delete, post, or put), so x() needs to be dynamic depending on which button opened the modal window.

The bootstrap modal window works, but if I put the func x() in line on the (click)= for the button, the x() executes while the modal is displayed.

The other difficulty is I am trying to use the modal window for three potential db update requests (delete, post, or put), so x() needs to be dynamic depending on which button opened the modal window.

HTML

<span *ngIf="!isCurrent">
                                    <button class="entry" id="add" (click)="openProofWindow(proof, 'add');">Add</button>&nbsp;&nbsp;
                                </span>
                                <span *ngIf="isCurrent">
                                    <button class="entry" id="update" (click)="openProofWindow(proof, 'update');">Update</button>&nbsp;&nbsp; <!--updateRequest();-->
                                    <button class="entry" id="delete" (click)="openProofWindow(proof, 'delete');">Delete</button>&nbsp;&nbsp;
                                </span>

ts code

 openProofWindow(content, target): void {
 this.modalService.open(content, target);

I have tried:

(click)="openProofWindow(proof, 'add');addRecord();"

but this executes before the modal is closed.

This is the modal window (HTML)

<div class="modal-header container">
        <div class="row">
            <h4 class="modal-title col-7">Proof Copy</h4>
            <button type="button" class="btn col-2 btn-modal" aria-label="no" (click)="modal.dismiss('cancel click')">
                    <span aria-hidden="true">No</span>
                </button>
            <button type="button" class="btn col-2 btn-modal btn-success" aria-label="ok" ngbAutofocus (click)="modal.close('Ok click');">
                <span aria-hidden="true">Ok</span>
            </button>
        </div>
    </div>

Nothing should happen until the user selects Ok or No.

If the users selects OK, depending on whether the modal was opened as an Add, Delete, or Update (put, delete, post) request, the appropriate function should be called - and the modal window closed.

Answer 1

You can use this

this.modalService.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  this.animal = result;
});

I also like to refer to the material documentation here

Answer 2

I did find an answer:

in:

openProofWindow(content, target): void {
 this.modalService.open(content, target);

in stead of adding a parament to modalService.open, I set a public variable.

public updateType: string;

openProofWindow(content, target): void {
this.updateType = target;
 this.modalService.open(content);

Then, in the 'OK' button I make an extra call:

<button type="button" class="btn col-2 btn-modal btn-success" aria-label="ok" ngbAutofocus (click)="confirmedEdit(); modal.close('Ok click');">
                <span aria-hidden="true">Ok</span>

I need to add the function to reference the variable set:

confirmedEdit(): void {
  console.log(this.updateType);
}

This works.