How to pass data to dialog of angular material 2
For the 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 the 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: anyUPDATE for Angular 9
MAT_DIALOG_DATA import location has changed to:
import {MAT_DIALOG_DATA} from '@angular/material/dialog';
UPDATE 2 (Angular 5+)
This answer is rather outdated. Take a look at epiphanatic's answer instead.
UPDATE
You can use dialogRef.componentInstance.myProperty = 'some data' to set the data on your component.
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:
...@Component({ ...})export class DialogComponent { public name: string; ...}Text below is not valid in newer versions of @angular/material
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;
So what you can do is for example
let name = dialogRef._containerInstance.dialogConfig.data.name;console.log(name); // Sunil
I thought I'd give a fuller answer for those of us who are still learning:
Unlike the Material Examples I configured the dialog to have its own component files (html, css and ts) for ease of debugging.
Main component file "x.component.ts" (calling the dialog)
1) add the import statement
import { MatDialog} from '@angular/material';2) add the property to the constructor params
public dialog: MatDialog3) define the code to call the dialog box
openDialog(title: string, text: string): void {const dialogRef = this.dialog.open(DialogComponent, { width: '350px', data: {dialogTitle: title, dialogText: text});dialogRef.afterClosed().subscribe(result => {}); const dialogSubmitSubscription = dialogRef.componentInstance.submitClicked.subscribe(result => { dialogSubmitSubscription.unsubscribe();});}
Call the function from your html file with openDialog(). I'm referencing DialogComponent so make sure its imported into your module.
import { DialogComponent } from './dialog/dialog.component';also
entryComponents: [DialogComponent]declare it in your entryComponents array
4) in your dialog.component.ts file, add the imports
import { Component, Output, EventEmitter, Inject, OnInit} from '@angular/core';import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';5) define the properties & functions
dialogTitle: string;dialogText: string;@Output() submitClicked = new EventEmitter<any>(); constructor( public dialogRef: MatDialogRef<DialogComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {} ngOnInit() { this.dialogTitle = this.data.dialogTitle; this.dialogText = this.data.dialogText; } saveMessage() { const data = 'Your data'; this.submitClicked.emit(data); this.dialogRef.close(); } closeDialog() { this.dialogRef.close(); }6) and lastly the HTML
<h1 mat-dialog-title>{{dialogTitle}}"</h1><div mat-dialog-content> <p>{{dialogText}}</p></div><div mat-dialog-actions> <button mat-button (click)="saveMessage()" >Ok</button> <button mat-button (click)="closeDialog()" cdkFocusInitial>No Thanks</button></div>I hope it helps.