How to pass data to dialog of angular material 2

I am using dialog box of angular material2.

I want to pass data to the opened component. Here is how I am opening dialog box on click of a button

let dialogRef = this.dialog.open(DialogComponent, {
disableClose: true,
data :{'name':'Sunil'}
});


On the documentation page there is data property, But I checked MdDialogConfig in my installed packages

/**
* Configuration for opening a modal dialog with the MdDialog service.
*/
export declare class MdDialogConfig {
viewContainerRef?: ViewContainerRef;
/** The ARIA role of the dialog element. */
role?: DialogRole;
/** Whether the user can use escape or clicking outside to close a modal. */
disableClose?: boolean;
/** Width of the dialog. */
width?: string;
/** Height of the dialog. */
height?: string;
/** Position overrides. */
position?: DialogPosition;
}


there is no data property in configuration class.

Now How can I access that passed data?

2 Answers
2

This answer is rather outdated. Take a look at epiphanatic's answer instead.

You can use dialogRef.componentInstance.myProperty = 'some data' to set the data on your component.

dialogRef.componentInstance.myProperty = 'some data'

You would need something like this:

let dialogRef = this.dialog.open(DialogComponent, {
disableClose: true,
});
dialogRef.componentInstance.name = 'Sunil';


Then in your DialogComponent you need to add your name property:

DialogComponent

name property

...

@Component({
...
})
export class DialogComponent {
public name: string;

...

}


I didn't find any documentation on this, so i started looking into the source code too. Because of that, this might not be the official way of to do.

I successfully located the data in dialogRef._containerInstance.dialogConfig.data;

dialogRef._containerInstance.dialogConfig.data

So what you can do is for example

let name = dialogRef._containerInstance.dialogConfig.data.name;
console.log(name); // Sunil


MdDialogConfig

For newest version of dialog (This is prior to Angular 5, for 5 see update below), you can do the following to pass data via the config which is much simpler and cleaner.

When you open the dialog, you can do it this way by adding data as a config param (just ignore the width and height which is there for illustration purposes):

this.dialogRef = this.dialog.open(someComponent, {
width: 330px,
height: 400px,
data: {
dataKey: yourData
}
});


Then in the component that is opened in the dialog, you can access it like:

import {MD_DIALOG_DATA} from '@angular/material';
import { Inject } from '@angular/core';


constructor(
@Inject(MD_DIALOG_DATA) public data: any
) { }

ngOnInit() {
// will log the entire data object
console.log(this.data)
}


Or you can use access it in the template or other methods, but you get the point.

UPDATE for Angular 5

Everything in material has been changed from Md to Mat, so if on Angular 5, import like:

import {MAT_DIALOG_DATA} from '@angular/material'


Then inject like

@Inject(MAT_DIALOG_DATA) public data: any


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.