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.

Rodas

Did you fixed this issue? How you fixed it? – Despicable

@Despicable Tell me your scenario what you want...Because still it's not working for me. So I hvae changed my logic . – Rodas

I want to redirect to another page when click the close button. – Despicable

But same code in difference machine it is working, difference is version, I am using 6.2 angular version another system angular version is 6.1? Is it a problem? I am not sure. I am going to upgrade the angular 6 to 7. – Despicable

@Despicable I am not sure. May be we are getting the version problem. because If you upgrade angular, then you should upgrade Primeng version as well. – Rodas

Okay. I will check and inform you. – Despicable

Have you checked that it has anything to do with *ngIf in the p-dialog tag? See #55001144 – Hamford

Answer 1

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

Keel

But in my side it's not working. May be the version is not matched? – Rodas

The only way to figure that out is to see more of your code. I used latest Angular and PrimeNG in my example. – Keel

Strange, on plunker it works but in my scenario its not! All other primeng components are working though – Greasepaint

Answer 2

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

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

Lee

Answer 3

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() 
 }
}

Yongyoni

Answer 4

There is a simple fix, that is not documented in the docs but I found it in this issue. You just need to split two way binding into one way binding using visbile and visibleChange properties like this:

 <p-dialog header="My dialog" 
  [visible]="showDialog$ |async" 
  (visibleChange)="handleClose()"
 >

Above I use Angular's async pipe to show the dialog and handleClose() method to close the dialog. In the .ts file I can have a service injected which is using some observable of boolean value that is changing based on some condition.

export class HomeComponent implements OnInit {

  showDialog$!: Observable<boolean>;

  constructor(private homeService: HomeService) { }

  ngOnInit(): void {
    this.showDialog$ = this.homeService.displayDialog$;
  }
  handleClose() {
    this.homeService.toogleDisplayDialog();
  }
}

Lag

Answer 5

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

Clubman

Answer 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>

Electroacoustics

Answer 7

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;
        }
    }

Yonit

Answer 8

(onHide) may not be triggered if [(visible)] is a constant.

<p-dialog (onHide)="close()" [(visible)]="true">

If this is what's causing the issue, just add a boolean initialized to true to your component.

<p-dialog (onHide)="close()" [(visible)]="someBoolean">

Covenant