Angular PrimeNG ConfirmDialog Styling

A responsive website may be easily created 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 see how to style the ConfirmDialog component in  Angular PrimeNG, along with understanding the styles and syntaxes that will be used in the code.

The ConfirmDialog facilitates the service that utilizes the Observables, in order to render the confirmation window, which is accessed by multiple actions on the same component. It can be defined using the p-confirmDialog tag and using the confirm method on an instance of ConfirmationService is necessary to display it.

Angular PrimeNG ConfirmDialog Styling Classes:

• p-dialog: This class is for applying custom styling to the container element
• p-confirmdialog: This class is for applying custom styling to the container element
• p-dialog-titlebar: This class is for applying custom styling to theContainer of 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 containers 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.

Syntax:

<p-confirmDialog [style]="..."></p-confirmDialog>

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 application: Run the below command to see the output

ng serve --open

Example 1: In this example, we are using predefined classes for styling in the style.css file as external CSS.

• 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 ConfirmDialog Styling</h3>
<p-confirmDialog></p-confirmDialog>
<p-button (click)="decision()"
          label="Click here to Join GFG Live Class">
</p-button>
<p-messages [value]="ToastMessages"></p-messages>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { ConfirmationService } from 'primeng/api';
import { Message } from 'primeng/api';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'confirmDialogStyling';
    ToastMessages: Message[] = [];

    constructor(
        private confirmationService: ConfirmationService
    ) { }

    decision() {
        this.confirmationService.confirm({
            message: 'Do you really want to join GFG Live Class ?',
            header: 'GeeksforGeeks',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                this.ToastMessages = [
                    {
                        severity: 'success',
                        summary: 'Success',
                        detail: 'You have joined this live class!',
                    },
                ];
            },
            reject: () => {
                this.ToastMessages = [
                    {
                        severity: 'info',
                        summary: 'Rejected',
                        detail: 'You have rejected this live class!',
                    },
                ];
            },
        });
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button';
import { MessagesModule } from 'primeng/messages';
import { ConfirmDialogModule }
    from 'primeng/confirmdialog';
import { AppComponent } from './app.component';
import { ConfirmationService } from 'primeng/api';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ConfirmDialogModule,
        ButtonModule,
        MessagesModule
    ],
    providers: [ConfirmationService],
    bootstrap: [AppComponent]
})
export class AppModule { }

• style.css

CSS

.p-dialog.p-confirm-dialog.p-component {
    width: 50vw !important;
}

.p-dialog .p-dialog-header {
    background-color: green !important;
    color: white !important;
}

.p-dialog .p-dialog-header .p-dialog-header-icon {
    color: white !important;
}

.p-dialog .p-dialog-content {
    background-color: green !important;
    color: white !important;
}

.p-dialog .p-dialog-footer {
    background-color: green !important;
    color: white !important;
}

Output:

Example 2: In this example, we will be using Inline CSS for Styling where we are using style attribute for implementing the inline CSS. The default value of the object data type is null. Inline CSS can be only for Outer div stylings such as its width, border, border-radius, and some more. 

• 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 ConfirmDialog Styling</h3>
<p-confirmDialog [style]=
    "{ width: '45vw',
       border: '5px solid black',
       borderRadius: '5px',
       fontSize: '22px',
       color: 'black',
       fontWeight: '700'}">

</p-confirmDialog>
<p-button (click)="decision()"
          label="Click here to Join GFG Live Class">
</p-button>
<p-messages [value]="ToastMessages"></p-messages>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { ConfirmationService } from 'primeng/api';
import { Message } from 'primeng/api';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'confirmDialogStyling';
    ToastMessages: Message[] = [];

    constructor(
        private confirmationService: ConfirmationService
    ) { }

    decision() {
        this.confirmationService.confirm({
            message: 'Do you really want to join GFG Live Class ?',
            header: 'GeeksforGeeks',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                this.ToastMessages = [
                    {
                        severity: 'success',
                        summary: 'Success',
                        detail: 'You have joined this live class!',
                    },
                ];
            },
            reject: () => {
                this.ToastMessages = [
                    {
                        severity: 'info',
                        summary: 'Rejected',
                        detail: 'You have rejected this live class!',
                    },
                ];
            },
        });
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button';
import { MessagesModule } from 'primeng/messages';
import { ConfirmDialogModule }
    from 'primeng/confirmdialog';
import { AppComponent } from './app.component';
import { ConfirmationService } from 'primeng/api';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ConfirmDialogModule,
        ButtonModule,
        MessagesModule
    ],
    providers: [ConfirmationService],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

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