How to apply style to the dialog's header in Primeng?

Question

I use Primeng version 11 for my Angular 11 project. I want to style the header of the dynamic dialog but don't know how.

I've tried headerStyle (error yet contentStyle works) and ":host ::ng-deep", but it's not working.

Here is my app.component.ts file:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { DialogService } from 'primeng/dynamicdialog';
import {DemoDialogComponent} from './demo-dialog/demo-dialog.component'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
    constructor(public dialogService: DialogService) { }

    show() {
    this.dialogService.open(DemoDialogComponent, {
        header: 'This is just a demo',
        width: '50%',
        contentStyle: { 'background-color': '#555', 'color': 'white'},
        // headerStyle: {'background-color':'blue'}  -- Not Working
    });
}
}

My app.component.html file

<button type="button" (click)="show()" pButton label="Show"></button>

My app.component.css file

:host ::ng-deep .p-dialog-header-close-icon{
    color:red; /* Not Working */
}

:host ::ng-deep .p-dialog-title{
    color: orange; /* Not Working */
}

How can I style the headers? I could try "showHeader:false" and then try my custom style in the dialog's content but it doesn't seem right.

Answer 1

You can modify the appearance of the dynamic dialog header by utilizing the styleClass attribute. This allows you to define a specific class, which you can then apply to the dialog component to customize its header.

1. When open the dialog :

  this.dialogService.open(DemoDialogComponent, {
        header: 'This is just a demo',
        width: '50%',
        contentStyle: { 'background-color': '#555', 'color': 'white'},
        styleClass:'testDialog' // this class will be added to the dialog component
    });

2. inside the DemoDialogComponent in SCSS file:

 ::ng-deep .testDialog {
  .p-dialog-header{
    .p-dialog-title{
      color:red
    }
    .p-dialog-header-icons{
      .p-dialog-header-icon{
        color:red
      }
    }
  }
}

I use styleClass property in order to select the desired dialog.