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.
p-dialog: It is the container element. p-dialog-titlebar: It is the container of the header. p-dialog-title: It is the header element. p-dialog-titlebar-icon: It is the icon container inside the header.
Specifices if pressing escape key should hide the dialog.
baseZIndex(zIndex)The z-index value. The z-index of all overlay UI components located on a page is calculated based on the value passed to this method. Since an overlay UI component is added, its z-index is increased by one relative to a previously added overlay UI component.
🎉 Your quest to find the UI library for Angular is complete. PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.
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();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With