Using MdDialogConfig data on Angular 2

Question

I'm trying to use a dialog component in Angular 2 using @angular/material2.0.0-beta.1. What I'm trying to accomplish is to send data (which are values that a person chooses from the interface, the dialog is used to make the person confirm the values they chose) to the dialog and display it. So for example the dialog should say something like this:

You chose:

option 1: value

option 2: value

option 3: value

Cancel | Confirm

How can I pass these values to the dialog I create so that I can just access them like so {{value}} in the view template? I think its using the data config, but I can't seem to find good documentation or examples on how to use it. Here's what I've been trying:

let config = new MdDialogConfig().data();
let dialogRef = this.dialog.open(DialogComponent);

DialogComponent

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

@Component({
   selector: 'dialog',
   template: require('./dialog.component.pug'),
   styleUrls: [
     './dialog.component.scss'
   ]
})

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

Answer 1

In parent component:

const config = new MdDialogConfig();

config.data = [
  // for example:
  'value 1',
  'value 2'
];

const dialogRef = this.dialog.open(DialogComponent, config);

DialogComponent:

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

@Component({
  selector: 'dialog',
  template: require('./dialog.component.pug'),
  styleUrls: [
    './dialog.component.scss'
  ]
})
export class DialogComponent implements OnInit {
  private values;

  constructor(public dialogRef: MdDialogRef<DialogComponent>) {}

  ngOnInit(): void {
    this.values = this.dialogRef.config.data;
  }
}

And sample template (HTML version):

<md-dialog-content>
  <md-list *ngIf="values">
    <md-list-item *ngFor="let value of values">{{ value }}</md-list-item>
  </md-list>
</md-dialog-content>

Update — @angular/material 2.0.0-beta.3

Since version 2.0.0-beta.3 of Angular Material, it is no longer possible to access config (and config.data) property of MdDialogRef<T>. Instead, you should inject MD_DIALOG_DATA token to access any data passed into your dialog component.

Imports:

import { Component, Inject, OnInit, Optional } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef }         from '@angular/material';

The constructor:

constructor(
  @Optional() @Inject(MD_DIALOG_DATA) private dialogData: any,
  private dialogRef: MdDialogRef<DialogComponent>
) {}

ngOnInit method:

ngOnInit(): void {
  // alternatively, rename ‘dialogData’ to ‘values’ and remove the
  // ‘ngOnInit’ method
  this.values = this.dialogData;
}

In many cases you’ll need to keep the @Optional() decorator, until issue 4086 will get resolved.