title: Angular Material: How to close all mat-dialogs and sweet-alerts on logout
body: <p>I wanted to close all my dialog's (mat-dialog, bootstrap modals &amp; sweet alerts) on logout in Angular. This is how it was done in AngularJS (version 1.5):</p>
  
  <pre><code>function logout() {
    //hide $mdDialog modal
    angular.element('.md-dialog-container').hide();
  
    //hide any open $mdDialog modals &amp; backdrop
    angular.element('.modal-dialog').hide();
    angular.element('md-backdrop').remove();
  
    //hide any open bootstrap modals &amp; backdrop
    angular.element('.inmodal').hide();
    angular.element('.fade').remove();
  
    //hide any sweet alert modals &amp; backdrop
    angular.element('.sweet-alert').hide();
    angular.element('.sweet-overlay').remove();
  }
  </code></pre>
  
  <p>How can I do this in Angular? Using <code>$('.mat-dialog-container')</code> or <code>$('.inmodal')</code> does't give me an option to do <code>hide()</code> or <code>close()</code></p>
  
  <p>I tried doing this, but I wan't able to get the element reference:</p>
  
  <pre><code>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&lt;MatDialog&gt;;
  
    constructor() { }
  
    function logout()
    {
      //access the dialogs here
    }
  }
  </code></pre>