Returning Data from MdDialog in Angular Material 2

Question

I am using a MdDialogModule to show a Dialog window with an input field in it. The Modal is opening fine and I am able to enter text into input field and submit, but on clicking the Submit button, I want the data in the Input form to be returned to the Main Component that called the Dialog component and also close the Dialog.

How do I do this? I am able to pass data to MdDialog component, but didn't find any resource on how to return data to component from MdDialogComponent.

My Dialog component code looks like this

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

@Component({
  selector: 'app-add-book',
  templateUrl: './add-book.component.html',
  styleUrls: ['./add-book.component.css']
})
export class AddBookComponent {

  constructor() { }

}

and the method in main component calling the dialog box looks like this. No response is being returned now, it returns Undefined as I haven't figured it out yet.

openCreateDialog() {
    let dialogRef = this.dialog.open(AddBookComponent)
      .afterClosed()
      .subscribe(response => {
        console.log(response);
      });
  }

Answer 1

First, you need to add MdDialogRef to your dialog component

export class AddBookComponent {
  constructor(private dialogRef: MdDialogRef<AddBookComponent>) { }
}

Then use dialogRef.close to return the data

save() {
  this.dialogRef.close({ data: 'data' });
}