close all open dynamic dialogs on logout-CodePudding

I am using primeng dynamic dialog to show some data in a component.However if the dialog is opened & the session times out, the app logs out but the dialog remains open. I want to close the dialog since the app has logged out. I tried calling DynamicDialogRef close() method but that's not working. How can I do this?

This is what I'm calling inside the sign out method -

 constructor private dialogRef: DynamicDialogRef) { }

 signOut()
        {
        this.dialogRef.close();
        this.dialogRef.destroy();
  }

This is how I'm calling the dialog- Template

   <button (click)="showDialog()"></button>

The method called:

showDialog() {
   
    const ref = this.dialogService.open(DetailsDialogComponent, {

      data: {
        value: 'TEST,
      },
      header: 'Details Panel",
      width: '70%',
      dismissableMask: true
    });

    
      }

CodePudding user response：

The primeng dialog has a two-way binding [(visible)] property that allows you to set a boolean value to it. By default, the value is false. So the same false flag can be used to close all your active dialogs when you perform some action (in your case its logout).

In your HTML template, do the following:

<p-dialog [(visible)]="openDialog1">
...
</p-dialog>
<p-dialog [(visible)]="openDialog2">
...
</p-dialog>

And in your ts file,

signOut() {
    this.openDialog1 = false;
    this.openDialog2 = false; // set for all the dialogs that you want to close
}

Updated:

If you aren't using p-dialog, try adding [DialogService] to the providers section of your component as follows,

providers: [DialogService]

Closing a dynamic dialog with data:

signOut() {
   this.dialogRef.close(data); // pass your data 
}

Then, use the onClose event to catch it. Hope this helps!

CodePudding user response：

Create own service for injection;

import { DynamicDialogRef, DialogService } from 'primeng/dynamicdialog';
import { Injectable } from '@angular/core';


@Injectable({
  providedIn: 'root'
})
export class DialogDynamicService {
  ref: DynamicDialogRef;
  constructor(private service: DialogService) {
  }

  open(ref, data){
     this.ref =  this.service.open(ref, {})
  }

  destroy(){
   if(this.ref){
      this.ref.destroy();
   }
  }
}

call your Component in service,

constructor(private dialogService: DialogDynamicService){}
    
  getDialog(){
        this.dialogService.open(DialogComponent,{});
    }

Session logout

constructor(public dialogService: DialogDynamicService) {}
signOut(){
 this.dialogService.destroy();
}

Don't forget to put DialogService in app Module or root Module

Hope this one will solve your issue. if not comment down.! thankyou

CodePudding user response：

So unlike mat dialog, primeng doesn't provide a method to close all dialogs at once, to achieve this I had to use the following -

 this.dialogService.dialogComponentRefMap.forEach(dialog => {
      dialog.destroy();
    });