Previously, we introduced a simple dialog example where we learned to open the dialog and close it. That barely scratched the surface. What is really interesting is how we would send data to the dialog so it comes prebooted with some data, and also how we would send data we gather inside of the dialog back to the host component that opened it. We will look at both these scenarios.

The business case for sending data to the dialog, so it starts with some data, is so that we can, for example, show an existing record and make updates to it in the dialog.

By adding a second argument to the method dialog.open() we are able to send data to the dialog component that it can display:

// jedi.model.ts
interface Jedi {
  name: string;
}

import { Component } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { DialogComponent } from "./dialog.component";

@Component({
 selector: 'dialog-example',
   template: `
   <button (click)="openDialog()">Open Dialog</button>
   `
})
export class DialogExampleComponent {
 selectedOption;
 jedi: Jedi;
 
 constructor(private dialog: MatDialog) {
   this.jedi = { name: 'Luke' };
 }

 openDialog() {
   let dialogRef = this.dialog.open(DialogComponent, {
     data: { jedi: this.jedi }
   });

   dialogRef.afterClosed().subscribe(result => {
     console.log(result);
   });
 }
}

On the dialog component side of things, we need to tell it about the data we are sending in. We do that by injecting MAT_DIALOG_DATA, the needed changes are in bold:

import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { Component, Inject } from "@angular/core";

@Component({
  selector: 'my-dialog',
  template: `
  <h1 mat-dialog-title>Save changes to jedi?</h1>
    <mat-dialog-content>
      <input matInput [(ngModel)]="data.jedi.name" />
   </mat-dialog-content>
   <mat-dialog-actions>
     <button mat-button (click)="saveAndClose()">Yes</button>
     <button mat-button mat-dialog-close>No</button>
  </mat-dialog-actions>
  `,
})
export class DialogComponent {
  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    console.log('dialog opened');
  }

  saveAndClose() {
    this.dialogRef.close('save');
  }
}

Now, because we have sent the data bound jedi instance from the host class, any changes we do to it in the Dialog class will be reflected in the host class. That takes care of sending data from the host class to the dialog, but what if we want to send data from dialog back? We can easily accomplish that by sending a parameter in the dialogRef.close() method call, like so:

export class DialogComponent {
  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    console.log('dialog opened');
  }

  saveAndClose() {
    this.dialogRef.close('save');
  }
}

To do something with that data, we simply subscribe to the Observable we get from calling   afterClose(). This is illustrated in bold as follows:

import { Component } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { DialogComponent } from "./dialog.component";

@Component({
  selector: 'dialog-example',
  template: `
  <button (click)="openDialog()">Open Dialog</button>
  `
})
export class DialogExampleComponent {
  selectedOption;
  jedi: Jedi;
  
  constructor(private dialog: MatDialog) {
    this.jedi = { name: 'Luke' };
  }

  openDialog() {
    let dialogRef = this.dialog.open(DialogComponent, {
      data: { jedi: this.jedi }
    });

   dialogRef
    .afterClosed()
    .subscribe(result => {
     // will print 'save' if we pressed 'Yes' button
     console.log(result);
   });
}}