angulardialogangular-material2mddialog

Returning Data from MdDialog in Angular Material 2


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

Solution

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