Component: Dialog in 'headless' mode can not be `draggable`

[NateRadebaugh]

Describe the bug

The draggable option on DynamicDialog's dialog is only applicable when using the built-in primeng dialog header. However, if we want to have a custom dialog header, there is no way to call into the Dialog's initDrag event manually.

Environment

Window,s Chrome

Reproducer

No response

Angular version

17.3.7

PrimeNG version

17.16.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.x

Browser(s)

No response

Steps to reproduce the behavior

  const dialogRef = dialogService.open(content, {
    showHeader: false,
    styleClass: `modal-${modalSize}`,
    data: {
      ...data,
    },
    modal: !windowed,
    draggable: windowed,
    resizable: windowed,
    closable: false,
  });

I can get access to the DynamicDialogRef but that does not expose any way to start/support draggable for the dialog such as via the initDrag method.

Expected behavior

A few options:

1. Dialog should be exposed somehow off of the DynamicDialogRef object
2. Maybe the initDrag (and possibly others) should be exposed directly off of the DynamicDialogRef instead of the whole Dialog instance if that should remain an internal implementation detail

[Sinan997]

The draggable option on DynamicDialog's dialog is only applicable when using the built-in primeng dialog header. However, if we want to have a custom dialog header, there is no way to call into the Dialog's initDrag event manually.

Draggable feature can be open by setting draggable value to true.

But showHeader shouldn't be false.

The draggable feature is active unless you set showHeader: false. It initialize the dragging method no matter you provide header template or not. You can check from source code

Eventually, if you want to provide header and want to active draggable feature, please dont set showHeader to false.

[NateRadebaugh]

Yes I understand, this is the issue I'm describing.

For my application, I need a custom header, so I cannot set showHeader to true -- I must set showHeader to false. In this case, I must completely handle dragging myself instead of being able to use any of the built-in functionality.

[Sinan997]

I didn't understand why you must set showHeader to false.

You can provide your custom header template, the default one wont be shown.

[NateRadebaugh]

Thank you, very interesting. I hadn't realized there was a templates flag on the config that DynamicDialog is using.

My understanding is that I can provide a component class to the config.templates.header field and it'll be used?

[Sinan997]

Yes, you can use as below.

{
  ...,
  templates: {
    header: HeaderTemplate,
    footer: FooterTemplate
  }
}