Component: Dynamic Dialog, there is no option to pass data back on custom event like output emitter about primeng HOT 4 OPEN

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

from primeng.

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

from primeng.

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

from primeng.

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

from primeng.