Angular 2 Nested Modal Dialog with PrimeNG doesn't work
Solution 1
Defining a componentref variable and using [appendTo]="Componentref" solve the issue. See discussion https://github.com/primefaces/primeng/issues/656
Solution 2
You can solve this problem by appending the second dialog to the document body by using the appendTo attribute, e.g.
<p-dialog appendTo="body">
...
</p-dialog>
altruistlife
Updated on July 06, 2022Comments
-
altruistlife almost 2 years
I am using the PrimeNG dialog component and I have a modal dialog from which, on the click of a button, I want to show another modal dialog.
What is happening is that my second modal dialog is not really modal, because I only see the content of the dialog following the button.
I do change [appendTo] attribute of the p-dialog for the second modal dialog but it does not seem to work properly.
How can I open nested dialog in a p-dialog?
Dialog in a angular 2 component:
<p-dialog header="Create/Edit Financial Flow" [visible]="display$ | async" modal="modal" width="500" height="600" responsive="true" [resizable]="false" [closable]="false"> <financial-flowdialog #myfinancialflowdialog (onCloseDialog) ="closeDialog()" [flowdata]="selectedFlows$ | async"></financial-flowdialog> </p-dialog>
When clicking a button within the first modal dialog, should open a second dialog. Below the definition of the nested dialog:
<p-dialog header="Title" [(visible)]="display" [appendTo]="body" *ngIf="display" modal="modal" width="500" height="600" responsive="true" [resizable]="false" [closable]="false"> <div class="container-fluid"> <form (ngSubmit)="onSubmit()"> <div class="pull-right top-buffer "> <button type="button" class="btn btn-primary" (click)="closeDialog()">Cancel</button> <button type="submit" class="btn btn-primary">Select</button> </div> </form> </div> </p-dialog> <button type="button" #mybtn [value]="value" ngDefaultControl [formControlName]="key" [id]="key" [ngStyle]="style" (click)="openDialog()">{{label}}</button>
I can open the first dialog but when I click on the button to open the second dialog, the content of dialog shows up like a normal div. Below the html rendered:
<section> <div id="nestediag" ng-reflect-form="[object Object]" class="ng-pristine ng-invalid ng-touched"> <!--template bindings={ "ng-reflect-ng-if": "true" }--><p-dialog header="Title" height="600" modal="modal" responsive="true" width="500" ng-reflect-visible="true"> <div class="container-fluid"> <form class="ng-untouched ng-pristine ng-valid"> <div class="pull-right top-buffer "> <button class="btn btn-primary" type="button">Cancel</button> <button class="btn btn-primary" type="submit">Select</button> </div> </form> </div> </p-dialog> <button ngdefaultcontrol="" type="button" value="Select a payee" ng-reflect-name="flowpayee" ng-reflect-ng-style="[object Object]" ng-reflect-value="Select a payee" ng-reflect-id="flowpayee" id="flowpayee" class="ng-pristine ng-valid ng-touched" style="width: 100%;">Select a payee</button> </div> </section>
-
Sujoy over 6 yearsI wish you could explain this with an example
-
Sujoy over 6 yearsappendTo="body" is not working. The submit button is doing nothing.
-
J. Abel about 4 yearsI have a Dynamic Dialog that is calling an Dialog (the nested dialog, p-dialog). I added appendTo = "body" in the nested dialog, but it is not working I am able to return and interchange information in the first Dialog (modal is not working). Maybe is by the combination of Dynamic Dialog and Dialog. I do not know it.