Dynamic Dialog: Possibility to style header

[pistage]

Describe the feature you would like to see added

I would like to request the addition of a feature that allows users to style the background and other visual elements of the header within the dynamic dialog. Currently, there's limited flexibility in customizing the header's appearance, and I believe this enhancement will greatly improve the user experience.

Is your feature request related to a problem?

Yes, it is. When using dynamic dialogs, I often find myself limited in terms of header customization.

Describe the solution you'd like

I propose enabling users to have more control over the styling of the header within the dynamic dialog. This should include the ability to:

• Customize the background color or image of the header.
• Adjust the font, text color, and alignment of the header title or content.
• Apply CSS styles or themes to the header for a consistent look and feel with the rest of the application.

Describe alternatives you have considered

I have explored alternative solutions, such as creating custom dialog components, but these approaches often involve significant development effort and can lead to code duplication. Having built-in support for customizable header styling would simplify the process and improve code maintainability.

Additional context

No response

[bvx5009]

i was able to customize a dynamic dialog by passing a class and editing the dialog css for that nested class

    this.ref = this.dialogService.open(MyComponent, 
      { 
          ...
        styleClass: 'my-class-here'
         ...
      }

sass:

.my-class-here  {
    .p-dialog-header {
        border-bottom: 1px solid var(--surface-border);
    }
    .p-dialog-content {
  //something here
    }
    .p-dialog-header, .p-dialog-content, .p-dialog-footer {
        background-color: var(--surface-b);
    }
}

i've used variables for consistent themes across the app as well.

However, i think it would be beneficial to have a custom header template with dynamic dialogs... insert custom avatars, buttons, dropdowns etc.

EDIT:

after more searching i found that you can specify templates which would allow you to do what you want:

this.ref = this.dialogService.open(MyComponent, 
      { 
        styleClass: 'review-comment-dialog',
        templates: {
          header: MyHeaderComponent
        }
      }