When working with the most recent version of dialog (specifically for versions prior to Angular 5, see update below), you have a simpler and cleaner way to pass data via the config.

To pass data when opening the dialog, use the following approach by including data as a config parameter (ignore the width and height examples, they are just for demonstration):

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

In the component that appears in the dialog, you can retrieve the data like this:

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

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

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

You can also access it in the template or other methods as needed.

Update for Angular 5:

All references in the material have been updated from Md to Mat, so if using Angular 5, import as follows:

import {MAT_DIALOG_DATA} from '@angular/material'

Then inject it like this:

@Inject(MAT_DIALOG_DATA) public data: any

Update for Angular 9:

The import location for MAT_DIALOG_DATA has changed to:

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

For those of us who are still learning, I wanted to provide a more detailed answer:

Instead of using the Material Examples, I decided to set up the dialog with its own separate component files (html, css, and ts) for easier debugging.

In the main component file "x.component.ts" (which calls the dialog), follow these steps:

1) Import MatDialog from '@angular/material':

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

2) Add the property to the constructor params:

public dialog: MatDialog

3) 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(). Make sure DialogComponent is imported into your module:

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

Also add it to your entryComponents array:

entryComponents: [DialogComponent]

4) In your dialog.component.ts file, add the necessary imports:

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

5) Define the properties and 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) Finally, set up the HTML for the dialog:

<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 this explanation helps!

When working on Angular 13, I found a way to pass an object into the dialog data structure using the code snippet below:

const dialogRef = this.dialog.open(MyDialog, {
  data: { myObjectHolder: myObject }
});

To access the passed object in the dialog class, you can utilize the following syntax:

private myObject: MyObjectClass;

constructor(@Inject(MAT_DIALOG_DATA) data: { myObjectHolder: MyObjectClass }) {
    this.myObject = data.myObjectHolder;
}

If you are working with Angular 10 or 11 and need to access MAT_DIALOG_DATA, make sure to import it using the following syntax:

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

Do not confuse this with importing from '@angular/material', as that is incorrect.

For more information, visit the official documentation here.

After successfully implementing a method in one component, I encountered some challenges when trying to make it work on a dialog box (another component).

The method involves a table component and a delete button.

  openDeleteDialog(user) {
    this.dialog.open(DeleteUserDialogComponent, {
      width: '30%', disableClose: true, data: user
    });
  }

The dialog box component is as follows:

export class DeleteUserDialogComponent {

  dataSource = new MatTableDataSource();

  constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DeleteUserDialogComponent>, private userService: UserService, @Inject(MAT_DIALOG_DATA) public data: any) {}


  deleteUser() {
    this.dataSource.data.splice(this.dataSource.data.indexOf(this.data), 1);
    this.dataSource.data = [...this.dataSource.data];
    console.log(this.dataSource.data);
    console.log(this.data)
  }

  click(): void {
    this.dialogRef.close();
  }
}

When dealing with HTTP data in dialogs, don't forget that RxJS and Observables can be a helpful solution.

Utilizing the dialog service:

    private _dialogDataSubj$ = new Subject<DialogData>();
    dialogData$ = this._dialogDataSubj$.asObservable()

    setDialogData(data: DialogData) {
        this._dialogDataSubj$.next(data)
    }

In the dialogue HTML:

<ng-container *ngIf="dialogData$ | async as data; else doneTmp">

I encountered an issue where updating data within my material dialog using just the dialog data reference (@Inject) did not work as expected (ie.: dialogRef.data = newData).