Después de investigar en diversos repositorios y sitios finalmente hallamos la solución que te mostramos pronto.

Solución:

Para la versión más reciente de diálogo (Esto es anterior a Angular 5, para 5 ver 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 se encuentran 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.

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

...

@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.

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 entradaComponentes array

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

  constructor(
    public dialogRef: MatDialogRef,
    @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

dialogTitle"

  
dialogText



  Ok
  No Thanks

Espero que ayude.

Si piensas que te ha resultado provechoso nuestro artículo, sería de mucha ayuda si lo compartes con otros desarrolladores y nos ayudes a difundir esta información.

Utiliza Nuestro Buscador