How to call angular function when click p-dialog close(X) button?

Question

How to call angular function when click p-dialog close(X) button?

I have searched and just tried this (onHide)="cancel()" . But it's not working. Kindly share your solutions.

I know we can use a close/cancel button to hide the popup. But in my scenario I want to call an event when clicking the (X) button click.

Answer 1

Actually (onHide)="cancel()" works fine according to this Plunkr.

Answer 2

Try: (click)="cancel()" instead.

I had the same error but I solved it by using the click method. Grettings :)

Answer 3

You should to use two events follow:

onBeforeHide: EventEmitter<any>;
onAfterHide: EventEmitter<any>;

use in html as

(onBeforeHide)="onBeforeHide()"
(onAfterHide)="onAfterHide()"

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

Answer 4

A workaround is to use a boolean to display the p-dialog with

   [(visible)]="myBoolean"

You set that boolean to true when you want to display the p-dialog Then use the (click) event. For instance

    (click)="doSomething($event)".

In your ts do

    doSomething(event) {
        // If we are clicking the close button and not something else
        if (event.target.className === "fa fa-fw fa-close") {
            myBoolean = false;
        }
    }

Answer 5

Just to add the above, If your [(visible)]="myBool_1 || myBool_2" depends on multiple variable.

Clicking X will try to set the last variable myBool_2 as false, we could leverage this by using a setter function.

so [(visible)]="isVisible"

class component {
 public get isVisible(): boolean {
    return myBool_1 || myBool_2
 }
 public set isVisible(val: boolean) {
   this.myBool_1 = this.myBool_2 = val;
   this.doSomethingOnClose() 
 }
}