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
MAT_DIALOG_DATA as per the Angular Material docs referenced below.
UI component infrastructure and Material Design components for mobile and desktop Angular web applications.
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
I included the dialog component in the module but I did not include the component in the
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.