Guide — MatDialog

I found it difficult while trying to implement a MatDialog. Here I have listed out the things to take care of while trying to implement MatDialog

Note: This is a working guide as on Feb 2020, using Angular 8

1. Import MatDialogModule & BrowserAnimationsModule in the module where you would like to use the MatDialog

2. Declare the dialog component (ExampleDialogComponent in this example) both as declarations and also as entryComponents

Mostly people forget the BrowserAnimationsModule and entryComponents part.

3. Invoke the mat-dialog from the parent component with the variable that is of type MatDialog.

4. [OPTIONAL] Declare dialogRef in the dialog component to access mat-dialog methods from the dialog component, and inject MAT_DIALOG_DATA if you want to pass some data from the parent component to the dialog component .

Make sure the application is loaded with a CSS theme.

Ref: Angular Material’s Dialog won’t display correctly

Do let me know if my article needs correction / improvement. TIA.