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

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.