Angular Confirmation Dialog With Custom Response

Hello Techies,

I hope you all are good at health and doing well in your life. So, today in this blog we are going to learn customization of the response of the confirmation dialog we get in angular with the help of primeng collection. Generally, we use the confirmation dialog to take a confirmation from the user like accept/reject or yes/no. But, in some cases we require the confirmation dialog to show more option, and we have to handle it with different function.

So, Today we are going to customize it and in this solution I am using the component Confirm Dialog provided by the primeng collections.

Also, here I am using the Stack blitz which is the free compiler for multiple languages like angular, react, etc. Also, I will add a link for my stack blitz project and also embed the final solution which you can fork and update and use for your own use.

Let's just start with the simple coding structure and how you can manage its different custom buttons/responses. Following are the steps to prepare our project for the solution.

Step 1

Create simple Angular TypeScript Project.

Step 2

Next install the primeng node package

Step 3

We have installed the Package, now import ConfirmDialog from the 'primeng/confirmdialog' and add it inside the app.module.ts or the module file which is connected with your component.

Step 4

Now go to the component and add the providers option in the @component scope and add the ConfirmationService as provider and import it from the 'primeng/api'. Add the other required package mentioned inside the Demo.

In the fourth step we have completed the setup of the project now we are going to create the object for the Confirmation service.

constructor(private confirmationService: ConfirmationService) {}

The above line will create a confirmationService Object. By using this object, we can call the confirmation Dialog via the Confirmation Service.

Let's create the HTML button for calling the simple function.

<p-button (click)="confirm()" icon="pi pi-check" label="Confirm"></p-button>

Now, this button is going to call the confirm method from our angular app.component.ts, which is given below.

confirm() {
    this.confirmationService.confirm({
      message: 'Are you sure you want to confirm ?',
      header: 'Confirm !',
      accept:()=>{console.log("Acceoted")},
      reject:()=>{console.log("Rejected")}
    });
  }

In the above code, I have created the confirmation Service dialog which is the basic method to call the Confirmation Dialog. Now, when we are going to click on the confirm button it will not show the confirmation dialog because here we have to add p-confirmdilog inside the HTML which is given below:

<p-confirmDialog [style]="{ width: '50vw' }" [baseZIndex]="10000"></p-confirmDialog>

Now, after adding the above code inside the HTML when you are going to click on the confirm button you will get the confirm dialog something like the following.

Here, we have only two options. So, This is the basic function or the response for the confirm dialog. Now, if we want to add new option like update or add or something related to it.

Let's consider we have a list of fruit and there is a banana, apple, and the watermelon inside the list, and we are going to add the banana. It will create the duplication inside the list right so for that we want to show the confirm dialog that we want to add or not duplicate value sometimes we want yes / no option, or we want to just update it right in terms of index.

So, let's add some custom buttons and create functions for that in place of this default buttons.

Now replace the p-confirmdialog code with the given below:

<p-confirmDialog [style]="{ width: '50vw' }" [baseZIndex]="10000">
  <p-footer>
    <button
      type="button"
      pButton
      label="Update Old Value"
      value="Update"
      class="p-button-tertiary"
      (click)="updateValueIndex()"
    ></button>
    <button
      type="button"
      pButton
      label="cancel"
      class="p-button-secondary"
      (click)="CancelToAdd()"
    ></button>
    <button
      type="button"
      pButton
      label="Create Duplicate"
      (click)="AddDuplicate()"
    ></button>
  </p-footer>
</p-confirmDialog>

So, we have created the Three buttons inside the p-ConfirmDialog. Next, create the functions we have added for the different buttons click events. Which is similar like what we create in the typescript.

updateValueIndex() {
     alert('Add Code to Update');
}
CancelToAdd() {
  alert('Cancel Adding Duplicate Value');
}
AddDuplicate() {
  alert('Add code for adding duplicate value');
}

Now, let's check our output with this custom functions and custom button, which we can also call as the custom response in terms of the function call.

As per the given HTML, you can add as many button as you want and functions for handling the response for button click.

Checkout the Solution on the Stack blitz and fork it in your branch and update as you want and customize it as per requirement.

Checkout Solution Here

I hope this blog will helpful to you for making customization with the confirmation dialog.

Thank you.