PrimeNG: custom header for DynamicDialog

Question

Is there a way to define a custom header template for a dynamic dialog?

For the normal dialog you have the possibility to define the p-header tag, with your custom html code.

But I don't find any way to do this for a dynamic dialog.

Sandip Jadhav Sandip Jadhav · Accepted Answer · 2020-09-27T14:07:30

There is no official way mentioned in PrimeNG documents to add custom template to DynamicDialog header. When we open a DynamicDialog, we only attach a body of Dialogbox and not header/footer.

You can add dynamic title to DynamicDialog while opening it. Hope this will help.

const ref = this.dialogService.open(DialogComponent, {
  data: this.data,
  header: this.title,
  width: '60%'
});

You can modify css of DynamicDialog header like:

::ng-deep .p-dialog .p-dialog-header {
  border-bottom: 1px solid #000;
}

Important Note: You can use simple Dialog in PrimeNG where you can create custom headers,body & Footers. It will work same like DynamicDialog. Do mention modal=true like below:

<p-dialog [(visible)]="display" [modal]="true">
<p-header>
    Header content here
</p-header>
Content
<p-footer>
    //buttons
</p-footer>

PrimeNG: custom header for DynamicDialog

1 Answers