Angular ConfirmPopup

Angular ConfirmPopup displays a confirmation overlay displayed relatively to its target.

Setup

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

Import

import {ConfirmPopupModule} from 'primeng/confirmpopup';
import {ConfirmationService} from 'primeng/api';

Getting Started

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

<p-confirmPopup></p-confirmPopup>

<button (click)="confirm($event)" pButton icon="pi pi-check" label="Confirm"></button>

export class ConfirmPopupDemo {

    constructor(private confirmationService: ConfirmationService) {}

    confirm(event: Event) {
        this.confirmationService.confirm({
            target: event.target,
            message: 'Are you sure that you want to proceed?',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                //confirm action
            },
            reject: () => {
                //reject action
            }
        });
    }
}

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.

<p-confirmPopup [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"></p-confirmPopup>

Theming

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

Resources

Visit the PrimeNG ConfirmPopup showcase for demos and documentation.