DEV Community

loading...
Cover image for Angular ConfirmPopup

Angular ConfirmPopup

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

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';
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.

<p-confirmPopup></p-confirmPopup>

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

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.

Discussion (0)