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=
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=
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