Returning Data from MdDialog to Angular Material 2

Question

I am using MdDialogModule to display a dialog box with an input field. The modal opens normally, and I can enter text in the input field and send, but when I click the "Send" button, I want the data in the input form to return to the main component that called the "Dialog" component, and also close the "Dialog" dialog box .

How should I do it? I can transfer data to the MdDialog component, but did not find any resource on how to return data to the component from the MdDialogComponent.

The code for the My Dialog component is as follows:

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 the main component that invokes the dialog box is as follows. Now the answer does not return, it returns Undefined, since I have not understood it yet.

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

Answer 1

MdDialogRef

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

dialogRef.close

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

Answer 2

...

ts:

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

ts:

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

Answer 3

"Dialog.open" .

, , . , , .

ref.close().

, ref.componentInstance.updatedSelectedArms, ,

var ref = this.dialog.open(SelectLoadingArmComponent, {
  width: '500px',
  data: { 
    loadingArms: this.loadingArms, 
    selectedloadingArms: this.selectedloadingArms
  }
});

ref.componentInstance.updatedSelectedArms.subscribe(
  (data) => {
    console.log(data)
    ref.close()
  }
);

Answer 4

this will help Link and it’s very easy to try your own way.