Open In App

Angular PrimeNG Dialog Styling

Improve
Improve
Like Article
Like
Save
Share
Report

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


Output:

 

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



Last Updated : 24 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads