Para la versión más reciente de diálogo ( esto es anterior a Angular 5, para 5 vea la actualización a continuación) , puede hacer lo siguiente para pasar datos a través de la configuración, que es mucho más simple y limpio.

Cuando abre el cuadro de diálogo, puede hacerlo de esta manera agregando datos como un parámetro de configuración (simplemente ignore el ancho y la altura que están allí con fines ilustrativos):

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

Luego, en el componente que se abre en el cuadro de diálogo, puede acceder a él como:

 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) }

O puede usar el acceso en la plantilla u otros métodos, pero entiende el punto.

ACTUALIZACIÓN para Angular 5

Todo en el material se ha cambiado de Md a Mat, por lo que si está en Angular 5, importe como:

 import {MAT_DIALOG_DATA} from '@angular/material'

Luego inyectar como

 @Inject(MAT_DIALOG_DATA) public data: any

ACTUALIZACIÓN para Angular 9

La ubicación de importación de MAT_DIALOG_DATA ha cambiado a:

 import {MAT_DIALOG_DATA} from '@angular/material/dialog';

ACTUALIZACIÓN 2 (Angular 5+)

Esta respuesta está bastante desactualizada. Eche un vistazo a la respuesta de epiphanatic en su lugar .

ACTUALIZAR

Puede usar dialogRef.componentInstance.myProperty = 'some data' para establecer los datos en su componente.

Necesitarías algo como esto:

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

Luego, en su DialogComponent necesita agregar su name property :

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

El texto a continuación no es válido en versiones más recientes de @angular/material

No encontré ninguna documentación sobre esto, así que también comencé a buscar en el código fuente. Por eso, esta podría no ser la forma oficial de hacerlo.

Localicé con éxito los datos en dialogRef._containerInstance.dialogConfig.data ;

Así que lo que puedes hacer es por ejemplo

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

Pensé en dar una respuesta más completa para aquellos de nosotros que todavía estamos aprendiendo:

A diferencia de los ejemplos de materiales, configuré el cuadro de diálogo para que tuviera sus propios archivos de componentes (html, css y ts) para facilitar la depuración.

Archivo de componente principal "x.component.ts" (llamando al cuadro de diálogo)

1) agregar la declaración de importación

 import { MatDialog} from '@angular/material';

2) agregue la propiedad a los parámetros del constructor

 public dialog: MatDialog

3) definir el código para llamar al cuadro de diálogo

 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(); });

}

Llame a la función desde su archivo html con openDialog(). Estoy haciendo referencia a DialogComponent, así que asegúrese de que esté importado en su módulo.

 import { DialogComponent } from './dialog/dialog.component';

además

 entryComponents: [DialogComponent]

declararlo en su matriz de componentes de entrada

4) en su archivo dialog.component.ts, agregue las importaciones

 import { Component, Output, EventEmitter, Inject, OnInit} from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

5) definir las propiedades y funciones

 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) y por último el 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>

Espero que ayude.