How To Use PrimeNgs Multiple pConfirmDialog On A Single Page

Posted By : Gaurav Arora | 30-Apr-2018

angularjs

Hi Guys!

As you all are aware of the PrimeNg, It is a collection of UI components for Angular like Dropdown, Datepicker, Confirm Box, Modals, Tooltips, Accordions and many another UI component that we use in our application.

In this blog, we will come to know that how to use multiple p-confirmdialog on a single page, as I also face the same issue.

We will start by defining the HTML for the p-confirmdialog.

Here we are using the customized format of p-confirmdialog. So that we can create our own button elements in the footer.

Now the question arises if we have to use multiple confirm boxes then, we have to define the confirm-dialog structure multiple times and the answer is NO, we will not repeat the structure. What will we do? We will access the confirm dialog through conditions in our component.

Now we will define buttons for the same

Now we will define the function in our component and with the help of switch case, we will manage our confirm dialog.

                            openDialog(type): void {
                                switch (type) {
                                    case 'confirm1':
                                        this.confirmationService.confirm({
                                            message: 'Modal 1 Content',
                                            header: 'Modal 1 Header',
                                            accept: () => {
                         
                                            },
                                            reject: () => {
                         
                                            }
                                        });
                                        break;
                                    case 'confirm2':
                                        this.confirmationService.confirm({
                                            message: 'Modal 2 Content',
                                            header: 'Modal 2 Header',
                                            accept: () => {
                         
                                            },
                                            reject: () => {
                         
                                            }
                                        });
                                        break;
                                    default:
                                        break;
                                }
                            }

What this will do is, when we click on button 1 it will use the methods defined in case 1 and when we click on button 2 it will use the methods defined in case 2.

In this way, we can use as many as we want to confirm dialog in our page as per the requirement.

For a complete reference on PrimeNg www.primefaces.org.