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

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.

Solution 1:^[1]

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

Solution 2:^[2]

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

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

Solution 3:^[3]

You should use two events as follows:

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

use in html as

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

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

Solution 4:^[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;
        }
    }

Solution 5:^[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() 
 }
}

Solution 6:^[6]

You can use the onHide EventEmitter, here the (alternative working method) sample code for the ts and html.

TS:

import {
  ...
  ViewChild,
  ...
} from '@angular/core';
import { Dialog } from 'primeng/dialog';  

...

@ViewChild('testDialog') testDialog: Dialog; 

...

onTestDialogClose() {
  const subscription = this.testDialog.onHide.asObservable().subscribe((_) => {
    // Do the action here
    subscription.unsubscribe();
  });
}

HTML:

<p-dialog #testDialog></p-dialog>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	hiper2d
Solution 2	Martin Jair Diaz Rodriguez
Solution 3	Leniel Maccaferri
Solution 4	Alvin Chipmunk
Solution 5	Vaisakh Rajagopal
Solution 6

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]