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.

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

app.component.ts:

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

app.module.ts:

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.

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

app.component.ts

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

app.module.ts

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

app.component.scss

CSS

:host ::ng-deep { 
    .p-dialog { 
        width: 55vw !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.2rem 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; 
    } 
}