Primeng: Cannot close stacked dynamic dialog from DynamicDialogRef.close() and escape key closes all dynamic dialogs

Created on 4 Jan 2019  路  10Comments  路  Source: primefaces/primeng

I'm submitting a ...

[X] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)
Demo: https://github-fxeygh.stackblitz.io/
Editor: https://stackblitz.com/edit/github-fxeygh

Current behavior
If you open inner dynamic dialogs via DialogService, firstly opened dialog cannot be closed programmatically calling by reference.close() method.

Expected behavior
All stacking dialogs should be programmatically closable

Minimal reproduction of the problem with instructions
Steps to reproduce the problem are available on the demo https://github-fxeygh.stackblitz.io/

  • Angular version: 7.1.4

  • PrimeNG version: 7.0.3

  • Browser:
    Chrome 71.0.3578.98
    Firefox 64.0

  • Language: TypeScript 3.1.6

Most helpful comment

@wanginternnect just check the stackblitz I provided in the description for the code sample. Current version is actually working because the DialogComponent has its providers: [DialogService] which injects its own instance.

You just have to add " providers: [DialogService] " to your "another dialog" and it should be fine

All 10 comments

DialogService by design one Dialog so for nesting, inner components needs to have its own service injected.

Thanks a lot for the answer, adding the DialogService into providers of the inner component solved the problem.
Cheers

Hello, cuneytcalishkan
Could you please tell me more detail about it.
I had same problem, so I hope your kind help.

Thanks

Hello @wanginternnect,

you just need to add the DialogService into the list of providers of your component that you are using the dialog service. This will inject a new instance of the dialog service.

e.g. Component1 opens Popup1, and you need to open another popup, Popup2, from within Popup1. You just need to put the DialogService into the providers array of your Popup1 component.

Hello, @cuneytcalishkan
Thanks for your kind reply.
I have created dialog with DialogService, and on this dialog, I have created another dialog with dialogservice.
Second dialog is closed by this.dynamicDialogRef.close();
But first dialog is not closed by this.dynamicDialogRef.close();- it works nothing.
If you have any solution, please help me.
Sincerely.

@wanginternnect just check the stackblitz I provided in the description for the code sample. Current version is actually working because the DialogComponent has its providers: [DialogService] which injects its own instance.

You just have to add " providers: [DialogService] " to your "another dialog" and it should be fine

Hello, @cuneytcalishkan
Thanks again.
I have added provider, but it is not working.
Could you please show me source code of stackblitz demo?

Sincerely

It is on the editor link up in the description, you should be able to access it: https://stackblitz.com/edit/github-fxeygh

Hi, @cuneytcalishkan
Thank you very much.
You have posted great article here.
I highly recommend you.
I hope to connect with you for a long time.
Thanks again.

This will not work if I try to subscribe to the close event of both the dialogues.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

papiroca-tm picture papiroca-tm  路  3Comments

miresk picture miresk  路  3Comments

gatapia picture gatapia  路  3Comments

SchneMa picture SchneMa  路  3Comments

jisqaqov picture jisqaqov  路  3Comments