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

Another way to do is to set the values from within the parent component DialogComponent

@Component({
selector: "dialog",
templateUrl: "./dialog.component.html"
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<DialogComponent>) { }
    type: string;
    name: string;
    ngOnInit(): void {

   }
}

ParentComponent

let dialogRef = this.dialog.open(DialogComponent);
dialogRef.componentInstance.type= title;
dialogRef.componentInstance.name= url;

Answer 2

Update: Definitely use the above Inject method to get your data. This way is dependent upon accessing a private member which is not guaranteed to remain untouched between versions

If you're using the new 2.0.0 beta 3 (or maybe it was even changed in beta 2, not sure) then the above answer has to be changed a little bit:

@Component({
selector: "dialog",
templateUrl: "./dialog.component.html"
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<DialogComponent>) { }
    type: string;
    name: string;
    ngOnInit(): void {
        let configData: any = this.dialogRef._containerInstance.dialogConfig.data;
        this.type = configData.type;
        this.name = configData.name;
   }
}

It seems like there should be a better way of referencing the data than this.dialogRef._containerInstance.dialogConfig.data but I couldn't find one

Answer 3

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.