The header of the Dialog is defined through the header property, and it can be controlled by the showHeader attribute. The header and footer sections of the Dialog component can be defined in a more flexible manner using the p-header and p-footer tags. In order to work with them, there is a need to import the header and footer components and declare it in the directives section.

A customized example of a Dialog component with customized header and footer will be written as follows:

<p-dialog[(visible)]="custom" modal="true">
  <p-header>
    PrimeNG License declaration
  </p-header>
  All widgets are open source and free to use under MIT License.
  If agree with the license please click 'Yes' otherwise click 'No'.
  <p-footer>
    <div class="ui-dialog-buttonpane ui-widget-content 
      ui-helper-clearfix">
      <button type="button" pButton icon="fa-close"
        (click)="onComplete()" label="No"></button>
      <button type="button" pButton icon="fa-check"
        (click)="onComplete()" label="Yes"></button>
    </div>
  </p-footer>
</p-dialog>

The following screenshot shows a snapshot result of the custom Dialog example:

The preceding snapshot shows how the header, message, and footer icons can be customized as per the needs or requirements. By default, the Dialog component is center aligned in the viewport, but this can be customized using positionLeft and positionTop properties.