Using MdDialogConfig Data on Angular 2

Question

I am trying to use the dialog component in Angular 2 using @angular/material2.0.0-beta.1 . What I'm trying to do is send data (which are the values ​​that the person selects from the interface, the dialog is used to force the person to confirm the selected values) in the dialog box and display it. So, for example, the dialog should say something like this:

You choosed:

option 1: value

option 2: value

option 3: value

Cancel | Confirm

How do I pass these values ​​to the created dialog box so that I can just refer to them like this {{value}} in the view template? I think it uses data configuration, but I cannot find good documentation or examples of how to use it. Here is what I tried:

 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 the 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 a 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 is from Angular material, access to the config (and config.data ) property is MdDialogRef<T> . Instead, you must enter the MD_DIALOG_DATA token to access any data transferred to your dialog component.

Import:

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

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 will need to support the @Optional() decorator until the 4086 problem is resolved.

Answer 2

Update. Definitely use the above Inject method to get your data. This method depends on access to a private member that cannot remain intact between versions.

If you are using the new version 2.0.0 beta 3 (or perhaps it was even changed in beta 2, I’m not sure), then the above answer needs to be slightly modified:

 @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; } } 

There seems to be a better way to reference data than this.dialogRef._containerInstance.dialogConfig.data , but I could not find one

Answer 3

Another way is to set values ​​from the parent component of DialogComponent

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

Parent parent

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