DEV Community

Cover image for Angular ConfirmPopup

Angular ConfirmPopup

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.
・1 min read

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


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


import {ConfirmPopupModule} from 'primeng/confirmpopup';
import {ConfirmationService} from 'primeng/api';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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


<button (click)="confirm($event)" pButton icon="pi pi-check" label="Confirm"></button>
Enter fullscreen mode Exit fullscreen mode
export class ConfirmPopupDemo {

    constructor(private confirmationService: ConfirmationService) {}

    confirm(event: Event) {
            message: 'Are you sure that you want to proceed?',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                //confirm action
            reject: () => {
                //reject action
Enter fullscreen mode Exit fullscreen mode

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


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


Visit the PrimeNG ConfirmPopup showcase for demos and documentation.

Discussion (0)