Angular ConfirmDialog

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

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

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 (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
            }
        });
    }
}

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>

Theming

ConfirmDialog supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG ConfirmDialog showcase for demos and documentation.