Subscribing to observable for Angular Material Dialog?

Question

I am new to Angular and am probably doing this completely wrong. I am trying to observe the backdropClick event that returns an observable. When that event occurs I would like to invoke a method called openSaveConfirmationModal()

Below are my two components. Component #1 is where my form dialog is opened from. Component #2 is the actual dialog with all its form field properties and methods. I am not sure where my subscription has to go or how to do it but based on my research I did this:

Component #1

import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import { EditClientUserComponent } from './edit-client-user.component';
import {ConfirmationDialogComponent} from "app/shared/confirmation-dialog.component";
import {ConfirmationDialogData} from "app/shared/confirmation-dialog-data.model";

@Component({
    moduleId: module.id,
    selector: 'organization-users',
    templateUrl: './organization-users.component.html',
    styleUrls: ['./organization-users.component.css']
  })

export class OrganizationUsersComponent implements OnInit {

constructor(
    public dialog: MdDialog,
    public dialogRef: MdDialogRef<EditClientUserComponent>  ) {
    dialog.afterAllClosed
      .subscribe(() => {
        this.getClientList();
        }
    );
    dialogRef.backdropClick()
      .subscribe(() => {
          this.openSaveConfirmationModal();
        }
      );
  }

openSaveConfirmationModal() {
    let confirmationDialog: ConfirmationDialogComponent = new ConfirmationDialogComponent(this.dialog);
    let confirmationDialogData: ConfirmationDialogData = {
      title: "Unsaved Changes",
      body: "Would you like to save your changes before leaving this page?",
      confirmbuttontext: "Save Changes",
      declinebuttontext: "Cancel Changes"
    };
    confirmationDialog.templateData = confirmationDialogData;
    confirmationDialog.confirm.subscribe(() => {
      saveChanges();
    });
    confirmationDialog.decline.subscribe(() => {
      closeConfirmationDialog();
    });
    confirmationDialog.openDialog();
  }

Component #2

import { Component, Inject, Optional, OnInit } from "@angular/core";
import { MD_DIALOG_DATA, MdDialogRef } from "@angular/material";


@Component({
  selector: "edit-client-user",
  templateUrl: "./edit-client-user.component.html",
  styleUrls: ["./edit-client-user.component.css"]
})

export class EditClientUserComponent implements OnInit {

  constructor( @Optional() @Inject(MD_DIALOG_DATA), 
    private dialogRef: MdDialogRef<EditClientUserComponent>) {
  }

Answer 1

The answer to this issue was to create a service and use an event emitter to essentially let the service know when the backdrop was clicked, and then the service can tell Component #2 that this occurred. The below code was added to Component #1 which is where the dialog opening is triggered. Now the issue is that backdropClick seems to work in Chrome but not in IE or Edge!!!!

dialogRef.backdropClick()
      .subscribe(() => {
          this.testService.testEvent.emit(true);
        }
      );