DEV Community

loading...
Cover image for Angular ConfirmDialog

Angular ConfirmDialog

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr 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.

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';
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() {
        this.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

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

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.

Discussion (0)