Angular Material: How to close all mat-dialogs and sweet-alerts on logout

Question

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

Hacking

Answer 1

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.

Hacking

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. :) – Unpolitic

like @Unpolitic said, private dialogRef: MatDialogRef<MyDialogComponent> is usually dialogRef because it is a reference and private matDialog: MatDialog is an instance of MatDialog. So use this.matDialog.closeAll();. – Worn

Answer 2

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

Deepsix

..and if you want to do something after all dialog is closed you should use this.matDialog.afterAllClosed.pipe(take(1)).subscribe(() => doSomething()) – Sethrida