In this tutorial, we’re going to learn how to use the Angular Material Dialog component (MatDialog along with MatDialogRef, MAT_DIALOG_DATA and MatDialogConfig) to build a custom Angular dialog example in Angular 10.

We’ll also see common cases to work with the Angular Material Dialog such as:

• how to create a dialog,
• how to pass data to the dialog component,
• how to get data back from a dialog component,
• how to use various configuration options for dialogs.

Before starting, first, you’ll need to make sure you have followed the steps to set up Angular Material for your Angular application.

Provided that you have initialized a project using Angular CLI 10 (or v6+), you can use the ng add command for quickly setting up Angular 10 in your project without going through most of the manual steps:

$ cd your_angular-project
$ ng add @angular/material 

#angular