Angular 2 Nested Modal Dialog with PrimeNG doesn't work
<p>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.</p>
<p>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.</p>
<p>I do change [appendTo] attribute of the p-dialog for the second modal dialog but it does not seem to work properly.</p>
<p>How can I open nested dialog in a p-dialog?</p>
<p>Dialog in a angular 2 component:</p>
<pre><code>&lt;p-dialog header=&quot;Create/Edit Financial Flow&quot;  [visible]=&quot;display$ | async&quot; modal=&quot;modal&quot; width=&quot;500&quot; height=&quot;600&quot; responsive=&quot;true&quot; [resizable]=&quot;false&quot; [closable]=&quot;false&quot;&gt;
&lt;financial-flowdialog #myfinancialflowdialog (onCloseDialog) =&quot;closeDialog()&quot; [flowdata]=&quot;selectedFlows$ | async&quot;&gt;&lt;/financial-flowdialog&gt;
&lt;/p-dialog&gt;
</code></pre>
<p>When clicking a button within the first modal dialog, should open a second dialog. Below the definition of the nested dialog:</p>
<pre><code>    &lt;p-dialog header=&quot;Title&quot; [(visible)]=&quot;display&quot; [appendTo]=&quot;body&quot; *ngIf=&quot;display&quot; modal=&quot;modal&quot; width=&quot;500&quot; height=&quot;600&quot; responsive=&quot;true&quot;
        [resizable]=&quot;false&quot; [closable]=&quot;false&quot;&gt;
        &lt;div class=&quot;container-fluid&quot;&gt;
            &lt;form (ngSubmit)=&quot;onSubmit()&quot;&gt;

                &lt;div class=&quot;pull-right top-buffer &quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; (click)=&quot;closeDialog()&quot;&gt;Cancel&lt;/button&gt;
                    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Select&lt;/button&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/p-dialog&gt;
    &lt;button type=&quot;button&quot; #mybtn [value]=&quot;value&quot; ngDefaultControl [formControlName]=&quot;key&quot; [id]=&quot;key&quot; [ngStyle]=&quot;style&quot; (click)=&quot;openDialog()&quot;&gt;{{label}}&lt;/button&gt;
</code></pre>
<p>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:</p>
<pre><code>&lt;section&gt;
    &lt;div id=&quot;nestediag&quot; ng-reflect-form=&quot;[object Object]&quot; class=&quot;ng-pristine ng-invalid ng-touched&quot;&gt;
        &lt;!--template bindings={
  &quot;ng-reflect-ng-if&quot;: &quot;true&quot;
}--&gt;&lt;p-dialog header=&quot;Title&quot; height=&quot;600&quot; modal=&quot;modal&quot; responsive=&quot;true&quot; width=&quot;500&quot; ng-reflect-visible=&quot;true&quot;&gt;
            &lt;div class=&quot;container-fluid&quot;&gt;
                &lt;form class=&quot;ng-untouched ng-pristine ng-valid&quot;&gt;

                    &lt;div class=&quot;pull-right top-buffer &quot;&gt;
                        &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot;&gt;Cancel&lt;/button&gt;
                        &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Select&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/p-dialog&gt;
        &lt;button ngdefaultcontrol=&quot;&quot; type=&quot;button&quot; value=&quot;Select a payee&quot; ng-reflect-name=&quot;flowpayee&quot; ng-reflect-ng-style=&quot;[object Object]&quot; ng-reflect-value=&quot;Select a payee&quot; ng-reflect-id=&quot;flowpayee&quot; id=&quot;flowpayee&quot; class=&quot;ng-pristine ng-valid ng-touched&quot; style=&quot;width: 100%;&quot;&gt;Select a payee&lt;/button&gt;
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>