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.

Answer 1

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>

Answer 2

There is one workaround.

In the component where dialog opens

show() {
    this.ref = this.dialogService.open(DynamicDialogContent, {
        header: '',
        width: '70%',
        contentStyle: { overflow: 'auto' },
        baseZIndex: 10000
    });
}

In the DynamicDialogContent component

ngOnInit() {
    const componentRef = this.viewContainerRef.createComponent(CustomHeader);
    let titleSpan = document.getElementsByClassName('p-dialog-title')[0];
    this.renderer.appendChild(titleSpan, componentRef.location.nativeElement)
}

And the custom-header component

@Component({
    template: ` <b>I'm custom dynamic dilog header</b>`
})
export class CustomHeader implements OnInit {
    constructor() {}

    ngOnInit() {
    }
}

Here is the full demo - stackblitz

Answer 3

It is possible to do like that:

     this.resultsDialogRef = this.dialogService.open(ResultsComponent, {
    header: 'Preview Results',
    width: '70%',
    contentStyle: {"overflow": "auto"},
    baseZIndex: 5000,
    maximizable: true,
    templates: {
      header: ResultsDialogHeaderComponent
    }
  }
);

Answer 4

This work for me:

ngOnInit() {

    let titleSpan = document.getElementsByClassName('p-dialog-title')[0];            
    titleSpan.innerHTML = 'custom dynamic header'
   }

Answer 5

The answer is a little bit late. But maybe someone else is also searching for a workaround. Afaik it is still not possible since this issue on GitHub is still open.

However in documentation to DynamicDialog there is mentioned, that you can not show the header with the parameter showHeader. This means you could easily just hide the default header and in the component for your dialog design your own header.