Angular PrimeNG ConfirmPopup Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the ConfirmPopup component in Angular PrimeNG.

The ConfirmPopup Component is used as a confirmation overlay and is shown relative to the target.

Import: In order to use the ConfirmPopup, we need to import the following statement in the module file:

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

Angular PrimeNG ConfirmPopup Component properties:

• key: When the component tree includes several confirm dialogues, an optional key that matches the key of the confirm object must be used.
• showTransitionOptions: It is used to set the transition options of the show animation. It is of string type and the default value is .12s cubic-bezier(0, 0, 0.2, 1).
• hideTransitionOptions: It is used to set the transition options of the hide animation. It is of string type and the default value is .1s linear.
• autoZIndex: It is used to decide whether to automatically manage to layer. It is of boolean type and the default value is true.
• baseZIndex: It is used to set the base zIndex value that is used in layering. It is of number type and the default value is 0.
• style: It is used to set the inline style of the component. It is of string type and the default value is null.
• styleClass: It is used to set the style class of the component. It is of string type and the default value is null.

Angular PrimeNG ConfirmPopup Component Styling:

• p-confirm-popup: It is a container element.
• p-confirm-popup-content: It is a content element.
• p-confirm-popup-icon: It is a message icon.
• p-confirm-popup-message: It is a message text.
• p-confirm-popup-footer: It is the footer element for the buttons.

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Steps to run the application: Run the below command to see the output:

ng serve --open

Example 1: Below is the example code that illustrates the use of Angular PrimeNG ConfirmPopup Component.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG ConfirmPopup Component</h5>

<p-toast></p-toast>
<p-confirmPopup></p-confirmPopup>
<button
    (click)="gfg($event)"
    pButton icon="pi pi-code"
    label="GeeksforGeeks">
</button>

• app.component.ts:

Javascript

import { Component } from "@angular/core";

import {
    ConfirmationService,
    MessageService,
} from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})

export class AppComponent {
    constructor(
        private confirmationService: ConfirmationService,
        private messageService: MessageService,
    ) {}

    gfg(event: Event) {
        this.confirmationService.confirm({
            target: event.target,
            message: "Confirm proceeding to check result geek?",
            icon: "pi pi-exclamation-triangle",
            accept: () => {
                this.messageService.add({
                    severity: "success",
                    summary: "WoW Geeks",
                    detail: "You are qualified in the interview."
                });
            },
            reject: () => {
                this.messageService.add({
                    severity: "error",
                    summary: "OOP's",
                    detail: "You are rejected in the interview."
                });
            }
        });
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ConfirmPopupModule } from "primeng/confirmpopup";
import { ToastModule } from "primeng/toast";
import { ButtonModule } from "primeng/button";
import { ConfirmationService, MessageService } from "primeng/api";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ConfirmPopupModule,
        ToastModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ConfirmationService, MessageService]
})

export class AppModule {}

Output:

Example 2: Below is another example code that illustrates the use of Angular PrimeNG ConfirmPopup Component using the showTransitionOptions and hideTransitionOptions.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG ConfirmPopup Component</h5>

<p-toast></p-toast>
<p-confirmPopup
    [showTransitionOptions]="'.8s'"
    [hideTransitionOptions]="'.9ms'">
</p-confirmPopup>

<button
    (click)="gfg($event)"
    pButton icon="pi pi-code"
    label="GeeksforGeeks">
</button>

• app.component.ts:

Javascript

import { Component } from "@angular/core";

import {
    ConfirmationService,
    MessageService,
} from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})

export class AppComponent {
    constructor(
        private confirmationService: ConfirmationService,
        private messageService: MessageService,
    ) {}

    gfg(event: Event) {
        this.confirmationService.confirm({
            target: event.target,
            message: "Confirm proceeding to check result geek?",
            icon: "pi pi-exclamation-triangle",
            accept: () => {
                this.messageService.add({
                    severity: "success",
                    summary: "WoW Geeks",
                    detail: "You are qualified in the interview."
                });
            },
            reject: () => {
                this.messageService.add({
                    severity: "error",
                    summary: "OOP's",
                    detail: "You are rejected in the interview."
                });
            }
        });
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ConfirmPopupModule } from "primeng/confirmpopup";
import { ToastModule } from "primeng/toast";
import { ButtonModule } from "primeng/button";
import { ConfirmationService, MessageService } from "primeng/api";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ConfirmPopupModule,
        ToastModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ConfirmationService, MessageService]
})

export class AppModule {}

Output:

Reference: https://primefaces.org/primeng/confirmpopup