p-dialog onHide not working in angular 2 component - primeng

Question

I'm using primeng in an angular 2 application and facing this issue (stackoverflow question)

Although the plunkr provided in the accepted answer works but it doesn't in my scenario. I have a separate component that loads the based on an input from the parent component. I want to toggle the visibility flag when the child component is closed/hidden.

Here's the code snippet

 <p-dialog header="Assets Management" [(visible)]="showDialog" modal="modal" [closable]="true" (onHide)="close()" appendTo="body">
          .. some content ..
  </p-dialog>

In component, I have:

@Component({
    selector: 'view-car-colors',
    templateUrl: '/view-car-colors.html',
    inputs: ['showDialog'],
    outputs: ["onCloseDialog"],
})
export class ViewCarColorsComponent {
    private showDialog: boolean = false;    //default close
    private onCloseDialog: EventEmitter<any> = new EventEmitter();

    public close(): void {
        this.showDialog = false;
        //emit this to its parent
        this.onCloseDialog.emit({ hasChanges: true });
    }
}

And finally in my parent component, I am calling it like:

<view-car-colors [showDialog]="showCarColorsDialog" (onCloseDialog)="onCarColorsCloseDialog($event)"></view-car-colors>

Where showCarColorsDialog is changed based on a button click.

private onCarColorsCloseDialog($event: any): void {
    this.showCarColorsDialog = false;
    if ($event.hasChanges) {
        //fetch the changes again
        this.getCarColors();
    }
}

I have used the primeng controls on multiple places and they all work fine but just has this issue so I'm sure it can't be because of the version.

yeah, that's my question. did you findout the solution? bcs still am struggling with this. — Ramesh Rajendran, Jun 02 '17 at 11:27
@RameshRajendran I added my answer on how I did it below alternatively. — Ali Baig, Jun 02 '17 at 18:01

score 4 · Accepted Answer · answered Jun 05 '17 at 09:39

4

try (onAfterHide)="close()".

https://github.com/primefaces/primeng/issues/956

answered Jun 05 '17 at 09:39

XeNo13GrIn

122
5

score 1 · Answer 2 · answered Jun 02 '17 at 18:00

After onHide didn't worked, I found a workaround using getter/setter like:

In my child component:

private _showDialog: boolean = false;

set showDialog(_show: boolean) {
        let result: boolean = this._showDialog != _show;
        if (result == true) {
            this._showDialog = _show;
            this.onCloseDialog.emit({ hasChanges: this.hasChanges, state: this._showDialog });
        }
    }
    get showDialog(): boolean{
        return this._showDialog;
    }

And in parent template:

<!--View Car Colors Dialog In Parent Component-->
<view-car-colors [showDialog]="showCarColorsDialog" (onCloseDialog)="onCarColorsCloseDialog($event)"></view-car-colors>

In Component, I receive the emit event:

private onCarColorsCloseDialog($event: any): void {
    let result = this.showCarColorsDialog != $event.state;
    if (result == true) {
        this.showCarColorsDialog = $event.state;
        if ($event.hasChanges) {
            this.getCarColors();
        }
    }
}

Yeah! that's good. but alternately am hide the close icon and disable esc button :P :P. — Ramesh Rajendran, Jun 29 '17 at 13:54

score 0 · Answer 3 · answered May 22 '17 at 03:17

0

try to implement:

export class ViewCarColorsComponent {
    @Output() onCloseDialog: EventEmitter<any> = new EventEmitter<any>();
.
.
.

}

and change modal="modal" to modal="true" in html file

answered May 22 '17 at 03:17

Tima Root

11
1

score 0 · Answer 4 · answered Apr 30 '21 at 13:11

0

use a get/set

public _displayDialog: boolean = false;
get displayDialog() { return this._displayDialog; }
set displayDialog(value) {
  this._displayDialog = value;
  if (this._displayDialog == false) {
    alert("hide")
  }
};

answered Apr 30 '21 at 13:11

Geordie Jenner

1
1

score 0 · Answer 5 · answered Jun 22 '22 at 08:58

In my case someone added *ngIf as well to dialog, and as you know *ngIf will remove dialog from the DOM, so onHide is never called...I had to remove the *ngIf from dialog(See example below)

<!------- ↓Remove this *ngIf-->
<p-dialog *ngIf="display" [(visible)]="display">
 ...
</p-dialog>

score -1 · Answer 6 · answered Nov 27 '19 at 07:05

-1

Try

<p-dialog [(visible)]="displayDialog" appendTo="body">

answered Nov 27 '19 at 07:05

Mohammad Almasi

400
6
19

1

Why should he do that? What does that do? How does it answer the question? https://stackoverflow.com/help/how-to-answer – Rob Nov 28 '19 at 00:48

p-dialog onHide not working in angular 2 component - primeng

6 Answers6

Linked