How can I pass a service variable into an Angular Material dialog?

Question

For mdDialog, how do I pass in variable? Specifically, how to inject an Angular service into the dialog component?

Answer 1

For passing variables you can grab the instance of the component opened in the dialog, from the MdDialogRef instance returned in the MdDialog.open() method call.

dialogRef = this.dialog.open(PizzaDialog, config) dialogRef.componentInstance.<property_name> 

Modified Pizza from the github material2 docs angular material doc

@Component({   selector: 'pizza-component',   template: `   <button type="button" (click)="openDialog()">Open dialog</button>   ` }) export class PizzaComponent {    constructor(public dialog: MdDialog) { }    openDialog() {     let config = new MdDialogConfig();     let dialogRef:MdDialogRef<PizzaDialog> = this.dialog.open(PizzaDialog, config);     dialogRef.componentInstance.name = "Ham and Pineapple";     dialogRef.componentInstance.size = "Large";   } }  @Component({   selector: 'pizza-dialog',   template: `   <h2>{{name}}</h2>   <p>Size: {{size}}</p>   <button type="button" (click)="dialogRef.close('yes')">Yes</button>   <button type="button" (click)="dialogRef.close('no')">No</button>   ` }) export class PizzaDialog {   name:string;   size:string;   constructor(public dialogRef: MdDialogRef<PizzaDialog>) { } } 

Answer 2

Material2 beta.2

The dialog.open() function takes a 2nd parameter config (MdDialogConfig) where you can specify any data object.

this.dialog.open(YourComponent, {   data: {     anyProperty: "myValue"   } }); 

You can then just retrieve this object from the component that is being used for your dialog window.

export class YourDialogComponent {    constructor(public dialogRef: MdDialogRef<YourComponent>) {     console.log('data', this.dialogRef.config.data);   } } 

UPDATE: beta.3

The answer above works for the version 2.0.0-beta.2 of Material2. If you are using 2.0.0-beta.3, the config property was removed from MdDialogRef. you can instead inject that value using the MD_DIALOG_DATA of the opened component.

New import statements

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

OPEN DIALOG

this.dialog.open(YourComponent, {   data: {     anyProperty: "myValue"   } }); 

RETRIEVE DATA FROM DialogRef component

export class YourDialogComponent {    constructor(     public dialogRef: MdDialogRef<YourDialogComponent>,     @Inject(MD_DIALOG_DATA) public data: any) {      console.log('data', this.data);   } }