title: primeng dialog does not open after closing
body: <p>I have created dialog as component inside another component. Dialog opens without issue but after closing and trying reopen it id not visible.</p>
  
  <p>Parent component
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component,OnInit } from '@angular/core';
  import { PostComponent } from './post/post.component';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    viewProviders: [PostComponent]
  })
  export class AppComponent implements OnInit {
  
    display: boolean;
  
    ngOnInit(): void {
    }
    
    openAdvancedSearch() {
      this.display = true;
      console.log("Display is set");
    }
   
    constructor() {
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>parent html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;app-post [display]="display"&gt;&lt;/app-post&gt;
    &lt;button type="button" class="btn btn-primary col" 
                  (click)="openAdvancedSearch()" [style.width.px]="150"&gt;Advanced Search&lt;/button&gt;
         </code></pre>
  </div>
  </div>
  </p>
  
  <p>Dialog component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
  
  @Component({
    selector: 'app-post',
    templateUrl: './post.component.html',
    styleUrls: ['./post.component.css']
  })
  export class PostComponent implements OnInit {
  
    @Input()
    display: boolean = false;
    publishedAfter: Date;
    publishedBefore:Date;
  
    constructor() { }
  
    ngOnInit() {
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Dialog html has a button clicking on which closes dialog
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;p-dialog header="Title" [(visible)]="display" [width]="500" 
        [contentStyle]="{'overflow':'visible'}"&gt;
       &lt;p-calendar [(ngModel)]="publishedAfter" [showIcon]="true" 
                      [style.width.px]="150"&gt;&lt;/p-calendar&gt;
  
       &lt;p-calendar [(ngModel)]="publishedBefore" [showIcon]="true" 
                      [style.width.px]="150"&gt;&lt;/p-calendar&gt;
  
       &lt;p-footer&gt;
          &lt;div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"&gt;
          &lt;button (click)="display=false"&gt;Close&lt;/button&gt;
        &lt;/div&gt;  
       &lt;/p-footer&gt;  
    &lt;/p-dialog&gt;</code></pre>
  </div>
  </div>
  </p>