The dialog component is quite powerful as it helps us create a modal. It can be customized to your heart's content and is a bit tricky to set up. But don't worry, we will guide you through the process. What we need to do is:

1. Import the dialog module.
2. Create a component that is our dialog.
3. Create a component and a button that will trigger the module.
4. Add our dialog to the entryComponents property of our module.

First off, we import the necessary module, like so:

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

@NgModule({
  imports: [MatDialogModule]
})

Next up, we create a component that will hold our dialog. It is a normal component with a template and a backing class, but it does need to inject a MatDialogRef. It should look something like this:

import { MatDialogRef } from "@angular/material";
import { Component } from "@angular/core";

@Component({
  selector: 'my-dialog',
  template: `
  <h1 mat-dialog-title>Perform action?</h1>
  <mat-dialog-content>Save changes to Jedi?</mat-dialog-content>
  <mat-dialog-actions>
   <button mat-button [mat-dialog-close]="true">Yes</button>
   <button mat-button mat-dialog-close>No</button>
  </mat-dialog-actions>
`
})
export class DialogComponent {
 constructor(public dialogRef: MatDialogRef<DialogComponent>) {
   console.log('dialog opened');
 }
}

What we have done here is define the following general structure in the template:

<h1 mat-dialog-title>Save changes to Jedi?</h1>
<mat-dialog-content>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button [mat-dialog-close]>Yes</button>
  <button mat-button mat-dialog-close >No</button> 
</mat-dialog-actions>

At a quick glance, we define a title, a content, and an action field, where buttons are defined. To send different values back we use [mat-dialog-close] and assign a value to it.

As for the code part, we inject an instance of MatDialogRef that is typed to MyDialog, which is the very component we are in.

The third thing we need to do is to set up a host component, in which there is a button that, when clicked, will launch a dialog. So let's do that with the following code:

import { Component } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { DialogComponent } from "./dialog.component";

@Component({
   selector: 'dialog-example',
   template: `
   <button (click)="openDialog()">Open Dialog</button>
  `
})
export class DialogExampleComponent {
  selectedOption;
     
  constructor(private dialog: MatDialog) { }
     
  openDialog() {
    let dialogRef = this.dialog.open(DialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      // do something with 'result'
    });
  }
}

We do two things here, we call dialog.open() with a type, which is our dialog component. Furthermore, by listening to the Observable we get back when calling   dialogRef.afterClosed() , we are able to inspect the result coming back from the dialog. At this point there isn't much of a result to look at but in the next section we will look at a more advanced dialog example where we use this method. 

Lastly, we need to go to our app.module.ts file and add our  DialogComponent dialog to the   entryComponents array, like so:

@NgModule({
  entryComponents: [DialogComponent]
})

So, adding things to the entryComponents array in an Angular module is a completely new concept to us, what does it actually do? When we add a component to that list we tell the compiler that this component needs to be compiled and needs a ComponentFactory so we can create it on the fly. Thus, the criteria for putting any component in here is that we want to load a component dynamically or by type. This is exactly the case with our DialogComponent. It doesn't actually exist before we call   this.dialog.open(DialogComponent). At that point, it runs a method under the hood called   ViewContainerRef.createComponent(). In short, we need to instantiate the DialogComponent every time we wish to open it. So, don't forget about entryComponents or it won't work. You can read more on entryComponents at https://angular.io/guide/ngmodule-faq#what-is-an-entry-component.  

Your dialog will end up looking something like this: