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' }); } 

Answer 2

Thanks for Harry's comment first...

below is the whole related script

Component ts:

  let dialogRef = this.dialog.open(DataListDialogComponent, dialogConfig).afterClosed()   .subscribe(response => {     console.log(response);   }); 

dialog ts:

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