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

Documentation

Import

import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {ConfirmationService} from 'primeng/api';
 

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="pi pi-exclamation-triangle"></p-confirmDialog>
<button type="text" (click)="confirm()" pButton icon="pi pi-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.

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 ng-template. If these values are unlikely to change then declarative approach would be useful, still properties defined in a ng-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 ng-template variable for the dialog and assign accept()-reject() methods to your own buttons.

<p-confirmDialog #cd header="Confirmation" icon="pi pi-exclamation-triangle">
    <p-footer>
        <button type="button" pButton icon="pi pi-times" label="No" (click)="cd.reject()"></button>
        <button type="button" pButton icon="pi pi-check" label="Yes" (click)="cd.accept()"></button>
    </p-footer>
</p-confirmDialog>
 

Animation Configuration

Transition of the ConfirmDialog open and hide animations can be customized using the transitionOptions property with a default value as 400ms cubic-bezier(0.25, 0.8, 0.25, 1), example below disables the animation altogether.

<p-confirmDialog [transitionOptions]="'0ms'">
</p-confirmDialog>
 

Properties

Styling

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

Dependencies

ConfirmationService

Source

View on GitHub

    
<p-confirmDialog [style]="{width: '50vw'}"></p-confirmDialog>
<button type="button" (click)="confirm1()" pButton icon="pi pi-check" label="Confirm"></button>
<button type="button" (click)="confirm2()" pButton icon="pi pi-times" label="Delete"></button>
<p-messages [value]="msgs"></p-messages>
 

@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 proceed?',
            header: 'Confirmation',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                this.msgs = [{severity:'info', summary:'Confirmed', detail:'You have accepted'}];
            },
            reject: () => {
                this.msgs = [{severity:'info', summary:'Rejected', detail:'You have rejected'}];
            }
        });
    }
    confirm2() {
        this.confirmationService.confirm({
            message: 'Do you want to delete this record?',
            header: 'Delete Confirmation',
            icon: 'pi pi-info-circle',
            accept: () => {
                this.msgs = [{severity:'info', summary:'Confirmed', detail:'Record deleted'}];
            },
            reject: () => {
                this.msgs = [{severity:'info', summary:'Rejected', detail:'You have rejected'}];
            }
        });
    }
}