Angular PrimeNG ConfirmPopup Properties

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 Properties in Angular PrimeNG.

The ConfirmPopup Component is used to display a confirmation overlay next to the target.

Angular PrimeNG ConfirmPopup Properties:

message: It is the confirmation message. It is of string type and the default value is null.
key: It is used when a component tree includes several confirm popups, the optional key that matches the key of the confirm popup must be used. It is of string type and the default value is null.
icon: It is used to display an icon next to the message. It is of string type and the default value is null.
accept: Once an action has been taken, a callback will be executed. It is a function and the default value is null.
reject: If an action is rejected, a callback will be executed. It is a function and the default value is null.
acceptLabel: It is the accept button’s label. It is of string type and the default value is null.
rejectLabel: It is the reject button’s label. It is of string type and the default value is null.
acceptIcon: It is the accept button’s icon. It is of string type and the default value is null.
rejectIcon: It is the reject button’s icon. It is of string type and the default value is null.
acceptVisible: It is the accept button’s visibility. It is of boolean type and the default value is null.
rejectVisible: It is the reject button’s visibility. It is of boolean type and the default value is null.
acceptButtonStyleClass: It is the accept button’s style class. It is of string type and the default value is null.
rejectButtonStyleClass: It is the reject button’s style class. It is of string type and the default value is null.
defaultFocus: When the popup appears, this element will have the emphasis; acceptable values are “accept,” “reject,” and “none.” It is of string type and the default value is accepted.

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 above file: Run the below command to see the output

ng serve --save

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

app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1> 

<h5>Angular PrimeNG ConfirmPopup Properties.</h5> 

<p-toast></p-toast> 

<p-confirmPopup></p-confirmPopup> 

<button 

    (click)="gfg($event)"  

    pButton 

    label="Click her geek!"> 

</button>

app.component.ts:

Javascript

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

import { 

    ConfirmationService, 

    MessageService, 

    PrimeNGConfig 

} from "primeng/api"; 

@Component({ 

    selector: "app-root", 

    templateUrl: "./app.component.html"
}) 
export class AppComponent { 

    constructor( 

        private confirmationService: ConfirmationService, 

        private messageService: MessageService, 

        private primengConfig: PrimeNGConfig 

    ) {} 

    gfg(event: Event) { 

        this.confirmationService.confirm({ 

            target: event.target, 

            message: "Are you sure you want to buy gfg course?", 

            accept: () => { 

                this.messageService.add({ 

                    severity: "success", 

                    summary: "Accepted", 

                    detail: "Course purchased successfully!"

                }); 

            }, 

            reject: () => { 

                this.messageService.add({ 

                    severity: "error", 

                    summary: "Rejected", 

                    detail: "OOP's, try buying next time."

                }); 

            } 

        }); 

    } 

    ngOnInit() { 

        this.primengConfig.ripple = true; 

    } 
}

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:

Angular PrimeNG ConfirmPopup Properties

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

app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1> 

<h5>Angular PrimeNG ConfirmPopup Properties.</h5> 

<p-toast></p-toast> 

<p-confirmPopup 

    [showTransitionOptions]="'.6s'"  

    [hideTransitionOptions]="'0.8s'"> 

</p-confirmPopup> 

<button 

    (click)="gfg($event)"  

    pButton 

    label="Click her geek!"> 

</button>

app.component.ts:

Javascript

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

import { 

    ConfirmationService, 

    MessageService, 

    PrimeNGConfig 

} from "primeng/api"; 

@Component({ 

    selector: "app-root", 

    templateUrl: "./app.component.html"
}) 
export class AppComponent { 

    constructor( 

        private confirmationService: ConfirmationService, 

        private messageService: MessageService, 

        private primengConfig: PrimeNGConfig 

    ) {} 

    gfg(event: Event) { 

        this.confirmationService.confirm({ 

            target: event.target, 

            message: "Are you sure you want to buy gfg course?", 

            accept: () => { 

                this.messageService.add({ 

                    severity: "success", 

                    summary: "Accepted", 

                    detail: "Course purchased successfully!"

                }); 

            }, 

            reject: () => { 

                this.messageService.add({ 

                    severity: "error", 

                    summary: "Rejected", 

                    detail: "OOP's, try buying next time."

                }); 

            } 

        }); 

    } 

    ngOnInit() { 

        this.primengConfig.ripple = true; 

    } 
}

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