Returning Data from MdDialog in Angular Material 2 Returning Data from MdDialog in Angular Material 2 angular angular

Returning Data from MdDialog in Angular Material 2


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


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


The "dialog.open" can be used to open the dialog component.

You can specify what data you would like to send to the dialog component by adding a second parameter. This can contain information like width and height check docs for more.

To close you can use ref.close().

If you want are expecting data from dialog then you can use ref.componentInstance.updatedSelectedArms which is an event fired when needed

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