primeng confirmation service multiple calls

Question

I am using PrimeNg with Angular 6 to generate a confirmation box on deleting an item from a form, and saving all changes made to the form. When

delete() {
  this._confirmationService.confirm({
     message: 'Delete Item?',
     key: 'delete',
     accept: () => {
       // code to delete row
     }
  });
}

submit() {
  this._confirmationService.confirm({
     message: 'Save Changes',
     key: 'submit',
     accept: () => {
       // code to save changes
     }
  });
}

html

<button pButton (click)="delete()"></button>
<button pButton (click)="submit()"></button>

<p-confirmDialog key="delete"></p-confirmDialog>
<p-confirmDialog key="submit"></p-confirmDialog>

When not using a key, both buttons call the submit confirm function. While using keys, the submit button calls the submit confirmation but gets stuck in a loop when accepted, and the delete function calls the submit confirmation then, if rejected, calls the delete confirmation.

What do I need to do so only the confirmation service specific to the function is called?

Answer 1

Try this code :

HTML:

<button type="button" (click)="delete()" pButton icon="pi pi-check" label="Delete"> 
</button>

<button type="button" (click)="submit()" pButton icon="pi pi-times" label="Submit"> 
</button>

<p-confirmDialog ></p-confirmDialog>

TS:

submit() {
    this.confirmationService.confirm({
        message: 'Are you sure that you want to proceed?',
        header: 'Confirmation',
        icon: 'pi pi-exclamation-triangle',
        accept: () => {
            //message here
        },
        reject: () => {
            //message here
        }
    });
}

delete() {
    this.confirmationService.confirm({
        message: 'Do you want to delete this record?',
        header: 'Delete Confirmation',
        icon: 'pi pi-info-circle',
        accept: () => {
            //message here
        },
        reject: () => {
            //message here
        }
    });
}