35

I wanted to close all my dialog's (mat-dialog, bootstrap modals & sweet alerts) on logout in Angular. This is how it was done in AngularJS (version 1.5):

function logout() {
  //hide $mdDialog modal
  angular.element('.md-dialog-container').hide();

  //hide any open $mdDialog modals & backdrop
  angular.element('.modal-dialog').hide();
  angular.element('md-backdrop').remove();

  //hide any open bootstrap modals & backdrop
  angular.element('.inmodal').hide();
  angular.element('.fade').remove();

  //hide any sweet alert modals & backdrop
  angular.element('.sweet-alert').hide();
  angular.element('.sweet-overlay').remove();
}

How can I do this in Angular? Using $('.mat-dialog-container') or $('.inmodal') does't give me an option to do hide() or close()

I tried doing this, but I wan't able to get the element reference:

import { ElementRef, Injectable, ViewChild } from '@angular/core';
import { MatDialog, MatDialogContainer, MatDialogRef } from '@angular/material';

export class MyClass
{
  @ViewChild('.mat-dialog-container') _matDialog: ElementRef;
  @ViewChild('.mat-dialog-container') _matDialogRef:MatDialogRef<MatDialog>;

  constructor() { }

  function logout()
  {
    //access the dialogs here
  }
}
Gil Epshtain
  • 8,670
  • 7
  • 63
  • 89
hakuna
  • 6,243
  • 10
  • 52
  • 77

2 Answers2

86

This is what i have done to close any open mat-dialog throughout the application:

import {MatDialog} from '@angular/material';

export class myClass {

constructor(private dialogRef: MatDialog) {
}

logOut()
{
  this.dialogRef.closeAll();
}

}

If you would like to close only a specific dialog you can loop through dialogRef.openDialogs and close the respective dialog using close()

This is how you can close any open/active sweet alert dialog:

const sweetAlertCancel = document.querySelector('.swal2-cancel') as HTMLElement;

if (sweetAlertCancel) {
    sweetAlertCancel.click(); //only if cancel button exists
}

const sweetAlertConfirm = document.querySelector('.swal2-confirm') as HTMLElement;

if (sweetAlertConfirm) {
   sweetAlertConfirm.click(); //if cancel doesn't exist , confirm is the equivalent for Ok button
}

Unlike material-dialog there is no method available to close or hide all open sweet alert dialog's. This is what i'm able to do so far.

hakuna
  • 6,243
  • 10
  • 52
  • 77
  • 1
    You are right, but your variable name is misleading. MatDialog is the dialog service itself. When you open a dialog that's when you get a dialogRef. :) – Totati Feb 05 '20 at 17:56
  • like @Totati said, `private dialogRef: MatDialogRef` is usually `dialogRef` because it is a reference and `private matDialog: MatDialog` is an instance of `MatDialog`. So use `this.matDialog.closeAll();`. – Pierre Dec 06 '22 at 17:10
9

For anyone looking for an answer, if method .closeAll() is not available on DialogRef (e.g. if using newer @angular/material components):

import {MatDialog} from '@angular/material/dialog';

constructor(matDialog: MatDialog) {…}

logout() {
    this.matDialog.closeAll();
}
finki
  • 2,063
  • 1
  • 20
  • 23
  • 4
    ..and if you want to do something after all dialog is closed you should use `this.matDialog.afterAllClosed.pipe(take(1)).subscribe(() => doSomething())` – Cichy Jun 01 '21 at 05:36