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.

Afresh

Answer 1

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.

Selfmortification

Answer 2

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>

Kerf

Using p-dialog is very much not the same. The contents (and any child components) initialize with the parent (and are simply hidden), rather than when the dialog opens. This can have huge performance implications if the child components are doing any heavy lifting, API calls, etc. – Pawnbroker

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
    }
  }
);

Frug

Answer 4

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

Instable

Answer 5

This work for me:

ngOnInit() {

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

Attorney