CODEWITHSUNDEEP
cssangulardialogprimengprimeng-dialog
Nhut Truong
Nhut Truong

Reputation: 45

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

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.

Upvotes: 1

Views: 2395

Answers (0)

Related Questions