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