Angular PrimeNG ConfirmPopup Styling

A responsive website may be created with great ease using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style. In this article, we’ll learn how to style the Angular PrimeNG ConfirmPopup Styling.

With respect to the target, the ConfirmPopup Component is displayed as a confirmation overlay.

Angular PrimeNG ConfirmPopup Styling:

• p-confirm-popup:  This class will be used to style a container element.
• p-confirm-popup-content:  This class will be used to style a content element.
• p-confirm-popup-icon:  This class will be used to style a message icon.
• p-confirm-popup-message:  This class will be used to style a message text.
• p-confirm-popup-footer:  This class will be used to style the footer element for the buttons.

Syntax:

<p-confirmPopup></p-confirmPopup>

Creating Angular application and Installing the modules:

Step 1: Use the command below to create an Angular application.

ng new confirmPopupStyling

Step 2: Use the following command to move to our project folder, confirmPopupStyling, after creating it.

cd confirmPopupStyling

Step 3: Install PrimeNG in the specified location.

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

Project Structure: The project structure will look like this once the installation is finished:

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

ng serve --open

Example 1: In this example, we’ll be using the inline style or style attribute of p-confirmPopup for styling the ConfirmPopup Component.

• app.component.html:

HTML

<h1>
    <span>
          <img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
          class="gfg-logo" alt="icon" />
      </span>

      <span style="color: green; font-size: 40px;">
          GeeksforGeeks
      </span>
</h1>
<h3>PrimeNG ConfirmPopup Component</h3>
<p-toast></p-toast>
<p-confirmPopup
    [style]="{
        width: '450px',
        fontFamily: 'fangsong',
        fontSize: '20px',
        border: '2px solid black',
        borderRadius: '9px',
        backgroundColor: 'green',
        color: 'white'
    }">
</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",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    title = "confirmPopupStyling";
    constructor(
        private confirmationService: ConfirmationService,
        private messageService: MessageService
    ) {}

    gfg(event: Event) {
        this.confirmationService.confirm({
            target: event.target || undefined,
            message: "Do you really want to continue this order?",
            icon: "pi pi-exclamation-triangle",
            accept: () => {
                this.messageService.add({
                    severity: "success",
                    summary: "WoW Geeks",
                    detail: "You are successfully ordered this course."
                });
            },
            reject: () => {
                this.messageService.add({
                    severity: "error",
                    summary: "OOP's",
                    detail: "You are order request declined."
                });
            }
        });
    }
}

• app.module.ts:

Javascript

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

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

export class AppModule {}

Output:

Example 2: In this example, Use a pre-defined styling class for styling the ConfirmPopup Component.

• app.component.html:

HTML

<h1>
    <span>
          <img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
          class="gfg-logo" alt="icon" />
      </span>

      <span style="color: green; font-size: 40px;">
          GeeksforGeeks
      </span>
</h1>
<h3>PrimeNG ConfirmPopup Component</h3>
<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",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    title = "confirmPopupStyling";
    constructor(
        private confirmationService: ConfirmationService,
        private messageService: MessageService
    ) {}

    gfg(event: Event) {
        this.confirmationService.confirm({
            target: event.target || undefined,
            message: "Do you really want to continue this order?",
            icon: "pi pi-exclamation-triangle",
            accept: () => {
                this.messageService.add({
                    severity: "success",
                    summary: "WoW Geeks",
                    detail: "You are successfully ordered this course."
                });
            },
            reject: () => {
                this.messageService.add({
                    severity: "error",
                    summary: "OOP's",
                    detail: "You are order request declined."
                });
            }
        });
    }
}

• app.module.ts:

Javascript

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

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

export class AppModule {}

• app.component.css:

CSS

:host ::ng-deep .p-confirm-popup {
    top: 180px !important;
    left: 75px !important;
}
:host ::ng-deep .p-confirm-popup
.p-confirm-popup-content {
    background-color: green;
}
:host ::ng-deep .p-confirm-popup
.p-confirm-popup-icon {
    color: black;
}
:host ::ng-deep .p-confirm-popup
.p-confirm-popup-message {
    color: white;
}
:host ::ng-deep .p-confirm-popup
.p-confirm-popup-footer {
    background-color: green;
}

Output:

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