How to send data in Material 2 dialog Angular 2 from 1 component to other

Question

I am using a Material 2 dialog, and I am able to get back data on dialog close.

But I am not able to find any solution to send data on dialog with @Input

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
  selector: 'dialog-result-example',
  templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

score 6 · Accepted Answer · edited Jul 12 '19 at 06:52

You can use the componentInstance property of MdDialogRef, as suggested by yurzui in Step 8 of the answer to this question.

For example, if you wanted to pass the value foo to a variable param1 in DialogResultExampleDialog, you could do the following:

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
  selector: 'dialog-result-example',
  templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog);
    dialogRef.componentInstance.param1 = "foo";
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}


@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
  param1: string;

  export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

I think param1 goes inside the body of DialogResultExampleDialog, right? — Willi Mentzel, Jul 12 '19 at 06:58

score 4 · Answer 2 · answered Mar 18 '17 at 03:54

Another way, you can use MdDialogConfig

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';


@Component({
  selector: 'dialog-result-example',
  templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let config = new MdDialogConfig;
    if (id) {
      config.data = { id: id }
    } else config.data = null;

    let dialogRef = this.dialog.open(DialogResultExampleDialog, config);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}


@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {
    if (dialogRef.config.data) {
            // do something...
     }
  }
}

This looks like a better way (since the data can be configured within the constructor of the Dialog). Thanks! — Sunil Sandhu, Jun 17 '17 at 07:33

How to send data in Material 2 dialog Angular 2 from 1 component to other

2 Answers2

Linked