Dynamic Dialog: custom header template

[projectX21]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Queue Time for Review
Without PRO Support: ~8-12 weeks.
With PRO Support: 1 hour

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[ x ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

Current behavior

imho it isn't possible to define a custom p-header in a dynamic dialog. Instead the specified component will be rendered into the dialog body and you are only able to set the header text via the DynamicDialog properties.

Expected behavior
You should be able to define a custom header template as it is possible for the normal dialog.

[projectX21]

Maybe there is a workaround to archive custom headers in a dynamic dialog?
I think this is a much needed feature.. For clean code I want to outsource the dialogs from the components.
This isn't possible with normal dialogs, because their code is in the same parent component, isn't it?

[igority]

If I may suggest this feature to be extended to 'Custom header and footer'. I believe custom footer is even more needed, since a common UI convention is to add the Save/Dismiss buttons to the footer of the modal. Currently that is not possible, and achieving a workaround with the current implementation is very hackish

[teland94]

It's awful for such great library.. Header and Footer are must be customizable with ng-template..

[kareljuricka]

+1

[idanielsteven]

+1

This is a big gap. need very much.

[benshabatnoam]

+1
Will you guys accept a PR for that?

[marchrenno]

+1
Very much needed. A possible workaround in the mean time is to use a div in the body of the Dynamic Dialog, with absolute position, and place it on top.

[tapoinde]

+1, and you should also be able to customize the footer. A similar approach to how Angular Material does this would be ideal.

example.component.html

<h2 pDialogTitle>The Title</h2>
<p-dialog-content>
   ... 
</p-dialog-content>
<p-dialog-actions>
   <button>Close</button>
   <button>Save</button>
</p-dialog-actions>

[bmizepatterson]

+1
Much needed!

[NarjesSharafi]

+1
DynamicDialog has some defects in maximizing, minimizing, and dragging dialog too.

[lucassalatiel1993]

+1
Cabeçalho e rodapé personalizados em DinamicDialog Deve existir, pois é algo comum.

[jonnomk]

+1

[Kallaran]

+1

Big gap :(

[dinesh-88]

+1

[JBottelsen]

+1

[schlagi123]

+1

[luketanner]

+1

[JerinJ]

+1

[mycahmason]

+1

[pkalkman]

+1

[Gixen]

+1

[frank71336]

+1
Seems to me, too, that the customizable footer is needed even more than a customizable header.

Btw: If you do not provide a footer text (and you can't provide a customizable footer) there is no border radius at the bottom of the dialog - even when looking at the official example: https://www.primefaces.org/primeng/showcase/#/dynamicdialog

[jonnomk]

I noticed that too and fixed it myself with CSS. The most frustrating issue though is not being able to specify a header and footer template that appear outside of the dialog content which means there's no scrolling body.

[Fichtenmeer]

I would also really love that feature, just found a little workaround for now. Maybe this helps for someone else.

You can hide the header with the parameter "showHeader". If you do so, you can design your own one and template it.

[Muzummil]

+1

[vtozkan]

+1

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[saramcicchi]

Hi @mertsincan - this feature has not been implemented yet. Can you please reopen?

[ARBS23]

I would also really love that feature, just found a little workaround for now. Maybe this helps for someone else.

You can hide the header with the parameter "showHeader". If you do so, you can design your own one and template it.

Yes we can but, other features like dragging can't be find if we use showHeader as false

[nathan7432]

I also stumbled upon this thread looking for this feature.

[vborutenko]

One workaround - https://stackoverflow.com/a/77330067/2021019

[shaka-b]

+1

[trantoi99]

+1

[cetincakiroglu]

Added in v17, please check the example for usage https://primeng.org/dynamicdialog#example and also please check the templating options of dynamic dialog https://primeng.org/dynamicdialog#api.dynamicdialog-ref.interfaces.DynamicDialogTemplates

[jason1004156]

Is Possible to let header width fit the dialog?
I tried use width: 100% in headerTemplate.scss file but not working, because it will fit the <ng-component class="ng-star-inserted"> but this element can't be set style directly