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.

@mkHun Tell me your scenario what you want...Because still it's not working for me. So I hvae changed my logic . — Ramesh Rajendran, Nov 19 '18 at 13:42
I want to redirect to another page when click the close button. — mkHun, Nov 19 '18 at 13:55
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. — mkHun, Nov 19 '18 at 13:57
@mkHun 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. — Ramesh Rajendran, Nov 19 '18 at 13:59
Have you checked that it has anything to do with *ngIf in the p-dialog tag? See https://stackoverflow.com/questions/55000644/p-dialog-onhide-is-not-working-with-ngif?rq=1 — user2367418, Feb 20 '20 at 01:40

score 10 · Accepted Answer · answered May 08 '17 at 13:35

10

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

answered May 08 '17 at 13:35

hiper2d

2,814
1
18
14

1

But in my side it's not working. May be the version is not matched? – Ramesh Rajendran May 08 '17 at 13:59
The only way to figure that out is to see more of your code. I used latest Angular and PrimeNG in my example. – hiper2d May 08 '17 at 14:10
1

Strange, on plunker it works but in my scenario its not! All other primeng components are working though – Ali Baig May 18 '17 at 15:11

score 2 · Answer 2 · answered May 23 '17 at 21:45

2

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

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

answered May 23 '17 at 21:45

Martin Jair Diaz Rodriguez

21
1

score 1 · Answer 3 · edited Nov 11 '21 at 00:21

1

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

edited Nov 11 '21 at 00:21

Leniel Maccaferri

100,159
46
371
480

answered Aug 25 '17 at 03:36

Trung

1,819
1
13
10

score 1 · Answer 4 · answered Jul 14 '20 at 07:48

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

Snowbases · Answer 5 · 2022-04-26T07:58:23.507

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>

score 0 · Answer 6 · answered Feb 01 '18 at 10:01

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

Lukas Coorek · Answer 7 · 2023-03-28T08:35:32.227

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

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

7 Answers7

Linked