title: Angular 2 Nested Modal Dialog with PrimeNG doesn't work
body: <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>