You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am currently working with the PrimeNG Dynamic Dialog component and encountering an issue when trying to submit a form within my `A-Dialog-Component'. There are two approaches I’ve tried:
Using a div with the 'p-dialog-footer' class:
By defining a div in the template of A-Dialog-Component and marking it with the class p-dialog-footer, the form submission works.
However, this method causes issues with scrolling and resizing, which do not function properly.
Using a custom footer component:
By defining a custom footer component (A-Dialog-Footer-Component) and including it in the template configuration when opening the dialog via dialogService.open(A-Dialog-Component, { ..., templates: { footer: A-Dialog-Footer-Component } }), the form submission only works when sending a event to the A-Dialog-Componen.
This approach necessitates the use of an additional service for communication between the footer and the body components, where the service forwards events (e.g., onSaveEvent) to the body component.
The second approach seems inefficient as it requires creating a service solely for event forwarding for each dialog. Notice here, that we would need one extra service for each dialog where we have a custom footer component (probably in every form-dialog). While I respect your design choice, could you please address the scrolling issue in the first approach? This would benefit those of us who prefer not to implement an extra service for each dialog. Thank you!
Environment
clean angular cli application with only a dynami dialog
Reproducer
No response
Angular version
18.0.2
PrimeNG version
17.18.0
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
20.11.1
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
Scrolling of the dynamic dialog to work properly when using a 'p-dyalog-footer' in the body.
The text was updated successfully, but these errors were encountered:
I think a better solution would be to make a headless template option for the DynamicDialogTemplates where the user can completly design the dialog for himself while he can still profit from the service logic in the background (like Angular material).
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 and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?
Thanks a lot for your understanding!
Best Regards,
Describe the bug
I am currently working with the PrimeNG Dynamic Dialog component and encountering an issue when trying to submit a form within my `A-Dialog-Component'. There are two approaches I’ve tried:
Using a div with the 'p-dialog-footer' class:
By defining a div in the template of
A-Dialog-Component
and marking it with the classp-dialog-footer,
the form submission works.However, this method causes issues with scrolling and resizing, which do not function properly.
Using a custom footer component:
By defining a custom footer component (
A-Dialog-Footer-Component
) and including it in the template configuration when opening the dialog viadialogService.open(A-Dialog-Component, { ..., templates: { footer: A-Dialog-Footer-Component } })
, the form submission only works when sending a event to theA-Dialog-Componen
.This approach necessitates the use of an additional service for communication between the footer and the body components, where the service forwards events (e.g.,
onSaveEvent
) to the body component.The second approach seems inefficient as it requires creating a service solely for event forwarding for each dialog. Notice here, that we would need one extra service for each dialog where we have a custom footer component (probably in every form-dialog). While I respect your design choice, could you please address the scrolling issue in the first approach? This would benefit those of us who prefer not to implement an extra service for each dialog. Thank you!
Environment
clean angular cli application with only a dynami dialog
Reproducer
No response
Angular version
18.0.2
PrimeNG version
17.18.0
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
20.11.1
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
Scrolling of the dynamic dialog to work properly when using a 'p-dyalog-footer' in the body.
The text was updated successfully, but these errors were encountered: