title: Angular4 PrimeNG dialog as component
body: <p>I am struggeling with an angular/primeng problem. i am new with angular4 and i am trying to open and close a dialog as an own component. I have a <strong>list-component</strong> where a datatable loads all data. If you click on a row and press the open button the <strong>dialog-component</strong> should open. But when i close the dialog and want to reopen it, it doesn't work. </p>
  
  <p><strong>list-component.html:</strong></p>
  
  <pre><code>&lt;button class="btn btn-default openBtn" type="button" 
      pButton label="Open" [disabled]="jobClosed" (click)="showDialog()"&gt;
  &lt;/button&gt;
  
  &lt;app-details [display]="display"&gt;&lt;/app-details&gt;
  </code></pre>
  
  <p><strong>list-component.ts</strong></p>
  
  <pre><code>display: boolean = false;
  
  showDialog() {
      this.display = true;
  }
  </code></pre>
  
  <p><strong>dialog-component.html</strong></p>
  
  <pre><code>&lt;p-dialog [(visible)]="display" modal="modal" [responsive]="true" 
    (onAfterHide)="onClose()"&gt;
     &lt;p&gt;Runs!&lt;/p&gt;
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p><strong>dialog-component.ts</strong></p>
  
  <pre><code>@Input() display: boolean;
  
  onClose(){
      this.display = false;
  }
  </code></pre>
  
  <p>The problem is, that the dialog opens when i click the button, but when i close it and want to open it again, it doesn't open anymore. Anybody knows why? I have read, that i need to create an @Output variable and use an EventEmitter, but i don't know if this is true and how it works. I hope anybody knows why the dialog doesn't reopen again after i closed it once. </p>