title: primeng resuable p-dialog component
body: <p>In my angular application I want to create a primeng p-dialog component which can be re-used across different component.
  Following is my implementation, but the p-dialog component is not displayed as a popup(as a dialog), it displays below the parent component.</p>
  <p>log-component.html</p>
  <pre><code>&lt;app-primeng-dialog 
      [isvisible]=&quot;showDialog&quot;&gt;
  &lt;/app-primeng-dialog&gt; 
      
  </code></pre>
  <p>log-component.ts</p>
  <pre><code>showDialogWindow() 
  {
  this.showDialog  = true;
  }
  </code></pre>
  <p>DialogComponent.ts</p>
  <pre><code>export class DialogComponent implements OnInit {
    @Input isvisible;
    ngOnInit() {
    }
  
  }
  </code></pre>
  <p>DialogComponent.html</p>
  <pre><code>&lt;div&gt;
      &lt;div *ngIf=&quot;isvisible&quot;&gt;
          &lt;div class=&quot;col-md-12 text-center p-1&quot;&gt;
              &lt;p-dialog [(visible)]=&quot;isvisible&quot; [modal]=&quot;true&quot; [responsive]=&quot;true&quot;
                  [style]=&quot;{width: '250px', minWidth: '100px', height:'350px', 'text-align': 'center'}&quot; [minY]=&quot;70&quot;
                  [maximizable]=&quot;false&quot; [baseZIndex]=&quot;10000&quot; [closeOnEscape]=&quot;true&quot; [closable]=&quot;false&quot; position=&quot;top&quot;&gt;
                  &lt;button type=&quot;button&quot; pButton  label=&quot;Ok&quot; class=&quot;ui-button&quot;&gt;&lt;/button&gt;
                  &amp;nbsp;
                  &lt;button type=&quot;button&quot; pButton label=&quot;Cancel&quot; class=&quot;ui-button&quot;&gt;&lt;/button&gt;
  
              &lt;/p-dialog&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>