7

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.

5 Answers 5

3

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.

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>
1
  • 4
    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. Commented Nov 30, 2021 at 16:08
2

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

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

0

This work for me:

ngOnInit() {

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.