ConfirmDialog ConfirmDialog is backed by a service utilizing Observables to display confirmation windows easily that can be shared by multiple actions on the same component.

Import


import {ConfirmDialogModule,ConfirmationService} from 'primeng/primeng';

Getting Started

ConfirmDialog is defined using p-confirmDialog tag and an instance of ConfirmationService is required to display it by calling confirm method.


<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>

<button type="text" (click)="confirm()" pButton icon="fa-check" label="Confirm"></button>


export class ConfirmDialogDemo { 
           
    constructor(private confirmationService: ConfirmationService) {}

    confirm() {
        this.confirmationService.confirm({
            message: 'Are you sure that you want to perform this action?',
            accept: () => {
                //Actual logic to perform a confirmation
            }
        });
    }
}

Confirm method takes a confirmation instance used to customize the dialog UI along with accept and reject actions.

Name Type Default Description
message string null Message of the confirmation.
header string null Header text of the dialog.
icon string null Icon to display next to the message.
accept Function null Callback to execute when action is confirmed.
reject Function null Callback to execute when action is rejected.

Customization

Properties of the dialog are defined in two ways, message, icon and header properties can either be defined using confirm method or declaratively on p-confirmDialog template. If these values are unlikely to change then declarative approach would be useful, still properties defined in a template can be overriden with confirm method call.

In addition, buttons at footer section can be customized by passing your own UI, important note to make confirmation work with a custom UI is defining a local template variable for the dialog and assign accept()-reject() methods to your own buttons.


<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425" #cd>
    <footer>
        <button type="button" pButton icon="fa-close" label="No" (click)="cd.reject()"></button>
        <button type="button" pButton icon="fa-check" label="Yes" (click)="cd.accept()"></button>
    </footer>
</p-confirmDialog>

Attributes

Name Type Default Description
header string null Title text of the dialog.
message string null Message of the confirmation.
icon string null Icon to display next to message.
acceptLabel string Yes Label of the accept button.
acceptIcon string fa-check Icon of the accept button.
acceptVisible string fa-check Visibility of the accept button.
rejectLabel string fa-close Label of the reject button.
rejectIcon string No Icon of the reject button.
rejectVisible boolean true Visibility of the reject button.
width int 300 Width of the dialog.
height int auto Height of the dialog.
closeOnEscape boolean true Specifices if pressing escape key should hide the dialog.
rtl boolean false When enabled dialog is displayed in RTL direction.
closable boolean true Adds a close icon to the header to hide the dialog.
responsive boolean true In responsive mode, dialog adjusts itself to screen width.
appendTo any null Target element to attach the dialog, valid values are "body" or a local template variable of another element.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-dialog Container element
ui-confirmdialog Container element
ui-dialog-titlebar Container of header.
ui-dialog-title Header element.
ui-dialog-titlebar-icon Icon container inside header.
ui-dialog-titlebar-close Close icon element.
ui-dialog-content Content element.

Dependencies

None.


<p-growl [value]="msgs"></p-growl>
    
<p-confirmDialog width="425"></p-confirmDialog>

<button type="button" (click)="confirm1()" pButton icon="fa-check" label="Confirm"></button>

<button type="button" (click)="confirm2()" pButton icon="fa-trash" label="Delete"></button>


@Component({
    templateUrl: 'showcase/demo/confirmdialog/confirmdialogdemo.html',
    providers: [ConfirmationService]
})
export class ConfirmDialogDemo {
    
    msgs: Message[] = [];
    
    constructor(private confirmationService: ConfirmationService) {}

    confirm1() {
        this.confirmationService.confirm({
            message: 'Are you sure that you want to perform this action?',
            accept: () => {
                this.msgs = [];
                this.msgs.push({severity:'info', summary:'Confirmed', detail:'You have accepted'});
            }
        });
    }
    
    confirm2() {
        this.confirmationService.confirm({
            message: 'Do 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'});
            }
        });
    }
}