How can I pass a service variable into an Angular Material dialog?
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>) { }
}
From the official docs found on https://material.angular.io/components/dialog/overview
Sharing data with the Dialog component.
If you want to share data with your dialog, you can use the data option to pass information to the dialog component.
let dialogRef = dialog.open(YourDialog, {
data: 'your data',
});
To access the data in your dialog component, you have to use the MD_DIALOG_DATA injection token:
import {Component, Inject} from '@angular/core';
import {MD_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'your-dialog',
template: 'passed in {{ data }}',
})
export class YourDialog {
constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
}
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);
}
}