Angular PrimeNG Dialog Styling
Last Updated :
24 Jan, 2023
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 will learn how to style the Dialog Styling in Angular PrimeNG.Â
The Dialog component is used to create a component with content for an overlay window to display. Below, there are 7 structural styling classes are listed.
Angular PrimeNG Dialog Styling:
- p-dialog: This class is for applying custom styling to the container element.
- p-dialog-titlebar: This class is for applying custom styling to the container of the header.
- p-dialog-title: This class is for applying custom styling to the header element.
- p-dialog-titlebar-icon: This class is for applying custom styling to the icon container inside the header.
- p-dialog-titlebar-close: This class is for applying custom styling to the close icon element.
- p-dialog-content: This class is for applying custom styling to the content element.
- p-dialog-footer: This class is for applying custom styling to the footer element.
Â
Syntax:
<p-dialog header="..."
[(visible)]="...">
</p-dialog>
Creating Angular application and Installing the modules:
Step 1: Use the command below to create an Angular application.
ng new appname
Step 2: Use the following command to move to our project folder, appname, after creating it.
cd appname
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 above application: Run the below command
ng serve --open
Example 1: This is the basic example, where we have used inline styling to style the Dialog Component.Â
HTML
< h1 >
< span >
< img src =
class = "gfg-logo" alt = "icon" />
</ span >
< span style = "color: green; font-size: 40px;" >
GeeksforGeeks
</ span >
</ h1 >
< h3 >PrimeNG Dialog Styling</ h3 >
< p-button (click)="gfg()" label = "Click Here" ></ p-button >
< p-dialog
header = "Angular PrimeNG Dialog"
[(visible)]="geeks" [style]="{
width: '50vw',
padding: '30px',
fontSize: '15px',
fontWeight: '500',
fontFamily: 'cursive',
background: 'gray',
border: '2px solid black',
borderRadius: '25px'
}">
< p >
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.
</ p >
< ng-template pTemplate = "footer" >
< p-button
icon = "pi pi-check"
(click)=" geeks = false "
label = "Ok"
styleClass = "p-button-text" >
</ p-button >
</ ng-template >
</ p-dialog >
|
Javascript
import { Component } from "@angular/core" ;
@Component({
selector: "app-root" ,
templateUrl: "./app.component.html" ,
styleUrls: [ "./app.component.css" ]
})
export class AppComponent {
title = "dialogStyling" ;
constructor() {}
ngOnInit() {}
geeks: boolean | undefined;
gfg() {
this .geeks = true ;
}
}
|
Javascript
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { DialogModule } from "primeng/dialog" ;
import { ButtonModule } from "primeng/button" ;
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
DialogModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Output:
Â
Example 2: Below is another example code, where we have used predefined styling classes for styling the Dialog Component.
HTML
< h1 >
< span >
< img src =
class = "gfg-logo" alt = "icon" />
</ span >
< span style = "color: green; font-size: 40px;" >
GeeksforGeeks
</ span >
</ h1 >
< h3 >PrimeNG Dialog Styling</ h3 >
< p-button (click)="gfg()" label = "Click Here" ></ p-button >
< p-dialog header = "Angular PrimeNG Dialog" [(visible)]="geeks">
< p >
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.
</ p >
< ng-template pTemplate = "footer" >
< p-button
icon = "pi pi-check"
(click)=" geeks = false "
label = "Close"
styleClass = "p-button-text"
></ p-button >
</ ng-template >
</ p-dialog >
|
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title = 'dialogStyling' ;
constructor() {}
ngOnInit() {}
geeks: boolean | undefined;
gfg() {
this .geeks = true ;
}
}
|
Javascript
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { DialogModule } from "primeng/dialog" ;
import { ButtonModule } from "primeng/button" ;
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
DialogModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
|
CSS
:host ::ng-deep {
.p-dialog {
width : 55 vw !important ;
}
.p-dialog-draggable .p-dialog-header {
background-color : green !important ;
}
.p-dialog-title {
color : white !important ;
}
.p-dialog .p-dialog-content {
background : green !important ;
color : white !important ;
}
.p-dialog .p-dialog-footer {
background : green !important ;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:focus {
box-shadow: 0 0 0 0.2 rem white !important ;
}
button.p-ripple.p-element.p-dialog-header- icon .p-dialog-header-close {
color : white !important ;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
background : black !important ;
color : white !important ;
}
.p-button.p-button-text:enabled:hover {
background : white !important ;
color : black !important ;
}
.p-button.p-button-text {
color : white !important ;
}
}
|
Output:
Â
Reference: https://primefaces.org/primeng/dialog
Share your thoughts in the comments
Please Login to comment...