PrimeNG p-confirmDialog

[dpint]

I have 3 p-confirmDialogs that need to correspond to 3 buttons. The correct p-confirmDialog should be displayed based on which button was clicked which should be set based on the variable "check" in my typescript file. Currently, I have to click a button twice to correctly set "check" to display correct p-confirmDialog. I console logged "check" after setting it to what I want it to be in each method and it is getting set correctly, just not "in time" so to speak, for the p-confirmDialog to read it and display the correct one. Here's the code:

<p-confirmDialog width="445" *ngIf="check=='Add'" acceptLabel="Add"></p-confirmDialog>
<p-confirmDialog width="445" *ngIf="check=='Update'" acceptLabel="Update"></p-confirmDialog>
<p-confirmDialog width="445" *ngIf="check=='Delete'" acceptLabel="Delete"></p-confirmDialog>

<div class="ui-grid-col-1">
<button type="button" (click)="confirmAdd()" pButton label="Add"></button>
</div>
<div class="ui-grid-col-1">
<button type="button" (click)="confirmUpdate()" pButton label="Update"></button>
</div>
<div class="ui-grid-col-1">
<button type="button" (click)="confirmDelete()" pButton label="Delete"></button>
</div>

typescript code:

check:string = null;

confirmAdd() {
this.check = "Add";
this.confirmationService.confirm({
message: 'Are you sure that you want to add this data point',
header: "Add Confirmation",
accept: () => {
//this.msgs = [];
//this.msgs.push({severity:'info', summary:'Confirmed', detail:'You have accepted'});
}
});
}

confirmUpdate() {
this.check = "Update";
this.confirmationService.confirm({
message: 'Are you sure you want to update this record?',
header: 'Update Confirmation',
icon: 'fa fa-check',
accept: () => {
//this.msgs = [];
//this.msgs.push({severity:'info', summary:'Confirmed', detail:'Record deleted'});
}
});
}

confirmDelete() {
this.check = "Delete";
this.confirmationService.confirm({
message: 'Are you sure you want to delete this record?',
header: 'Delete Confirmation',
icon: 'fa fa-trash',
accept: () => {
//this.msgs = [];
//this.msgs.push({severity:'info', summary:'Confirmed', detail:'Record deleted'});
}
});
}

In summary, this code does what it is supposed to do, but it requires me to click the buttons twice in order for the confirm dialog to pop up.
Thanks!!

[igogu]

How did you solve it? I solved it using ChangeDetectorRef calling the detectChanges function when you update the string check value.

If you have other solution it would be a pleasure to know about it.

Thank you

[anthonilawrance]

Hi,
You can use only one confirm dialog in html. So please use p-dialog component instead of it. Please let me know if you face the same problem again.

With Regards,
Anthoni Lawrance Arokiyasamy