DEV Community

Cover image for Angular ConfirmDialog

Angular ConfirmDialog

PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use to contact us.
・2 min read

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.


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


import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {ConfirmationService} from 'primeng/api';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
export class ConfirmDialogDemo {

    constructor(private confirmationService: ConfirmationService) {}

    confirm() {
            message: 'Are you sure that you want to perform this action?',
            accept: () => {
                //Actual logic to perform a confirmation
Enter fullscreen mode Exit fullscreen mode


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">
        <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>
Enter fullscreen mode Exit fullscreen mode

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'">
Enter fullscreen mode Exit fullscreen mode


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


Visit the PrimeNG ConfirmDialog showcase for demos and documentation.

Discussion (0)