Component: Dynamic Dialog, there is no option to pass data back on custom event like output emitter

[jstechaut]

Describe the bug

In the context of PrimeNG's Dynamic Dialog component, there's currently no built-in functionality to pass data back to the parent component via a custom event emitter, such as an Output. This limitation inhibits seamless communication between the dynamically created dialog and its parent component. It would be beneficial to raise this issue with the PrimeNG development team to address the absence of this feature. Implementing such functionality would enhance the flexibility and usability of the Dynamic Dialog component, allowing for more efficient data exchange and interaction between components within Angular applications.

Environment

vscode

Reproducer

No response

Angular version

17.0.0

PrimeNG version

17.3.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.12.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

need support for the above

[renanhfranca]

Hi jstechaut,

In my project, when I'm working with Dynamic Dialog, I use the close method to pass data back to the parent. Basically, inside the opened component, I inject the DynamicDialogRef reference. Then, on the close button, I call the close method, passing the data. In the parent component, it is necessary to subscribe to the onClose event.

You can find a sample on the link bellow:

https://primeng.org/dynamicdialog

[NateRadebaugh]

You can write a small function to have a promise that only resolves once the dialog is closed:

export async function showModalDialogWithRef(dialogService, content, data) {
  const dialogRef = dialogService.open(content, {
    // your options
    data: {
      ...data,
    },
  });

  return new Promise((resolve, reject) => {
    dialogRef.onClose.subscribe((result) => {
      resolve(result);
    });
  });
}

Or you can return the reference in case you need to use it to dynamically close later

export async function showModalDialogWithRef(dialogService, content, data) {
  const dialogRef = dialogService.open(content, {
    // your options
    data: {
      ...data,
    },
  });

  // Properly bind the context of the dialog so we can close it dynamically
  dialogRef.close = dialogRef.close.bind(dialogRef);

  return [
    new Promise((resolve, reject) => {
      dialogRef.onClose.subscribe((result) => {
        resolve(result);
      });
    }),
    dialogRef,
  ] as const;
}

[jstechaut]

I want the data to be passed without closing the modal , as close event will only work on closing the modal , I want to send data back to parent component without closing the modal

[NateRadebaugh]

Interesting. Try passing the callback as part of the data object then, and you can call it from your modal directly.

[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 open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,