Fix — MatDialog not displaying properly

If you are not interested in listening to the whole story then please jump to THE SOLUTION section straight away

The broken Mat-Dialog UI

I wanted to display a confirm dialog box on one of the components when a user tries to change some option.

I included the MatDialogModule in a shared module that I had already integrated with the root (app) module.

Then I created a component for the dialog window and made it trigger from another component where I imported MatDialog, MatDialogRef, MAT_DIALOG_DATA as per the Angular Material docs referenced below.

Angular Material

I expected the dialog window to be displayed on a click of a button, and that’s when I arrived at the issue.

Solutions for other problems related to MatDialog that might be helpful

• MatDialog not showing
• Angular Material’s Dialog won’t display correctly
• Angular 2 easy way to make a confirmation dialog

The Solution

I included the dialog component in the module but I did not include the component in the entryComponents

entryComponents: [ ExampleDialogComponent ]

I did just that and it worked like a charm.

Credits: MatDialog not displayed correctly

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