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

Answer 1

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 2

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 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.