Angular4 PrimeNG dialog as component

Question

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 list-component where a datatable loads all data. If you click on a row and press the open button the dialog-component should open. But when i close the dialog and want to reopen it, it doesn't work.

list-component.html:

<button class="btn btn-default openBtn" type="button" 
    pButton label="Open" [disabled]="jobClosed" (click)="showDialog()">
</button>

<app-details [display]="display"></app-details>

list-component.ts

display: boolean = false;

showDialog() {
    this.display = true;
}

dialog-component.html

<p-dialog [(visible)]="display" modal="modal" [responsive]="true" 
  (onAfterHide)="onClose()">
   <p>Runs!</p>
</p-dialog>

dialog-component.ts

@Input() display: boolean;

onClose(){
    this.display = false;
}

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.

Aventurine

Why don't you use popup? – Goglet

Recent versions have dynamic dialog. – Kantos

Answer 1

I made it on my own. As i said an EventEmitter is needed here.

list-component.html:

<button class="btn btn-default openBtn" type="button" 
    pButton label="Open" [disabled]="jobClosed" (click)="showDialog()">
</button>

<app-details [display]="display" (displayChange)="onDialogClose($event)"></app-details>

list-component.ts:

display: boolean = false;

showDialog() {
    this.display = true;
}

onDialogClose(event) {
   this.display = event;
}

dialog-component.html:

<p-dialog [(visible)]="display" modal="modal" [responsive]="true">
   <p>Runs!</p>
</p-dialog>

dialog-component.ts:

  @Input() display: boolean;
  @Output() displayChange = new EventEmitter();

  onClose(){
    this.displayChange.emit(false);
  }

  // Work against memory leak if component is destroyed
  ngOnDestroy() {
    this.displayChange.unsubscribe();
  }

Aventurine

This would be my answer if you haven't figures it out. – Ernesternesta

small piece is missed in dialog-component.html, add (onHide)="onClose()" to <p-dialog [(visible)]="display" modal="modal" [responsive]="true" (onHide)="onClose()"> <p>Runs!</p> </p-dialog> – Grandpa