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 .

One more check

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.




learner. seeker.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A primer on testing React apps with React Testing Library

Custom 404 Pages on Zeit Now v2 Platform

How to get Last Item of an Array in JavaScript

Let’s build a Profile App with AWS Amplify — Part 01

Data Structure & Algorithms in Javascript

6 Visual Studio Code Extensions I Cannot Live Without

VS Code extension icons

NGRX Common Gotcha's

Improving Formik Performance when it’s slow (Material UI)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Prakash M.

Prakash M.

learner. seeker.

More from Medium

How to show a loader in Angular + Ionic app

How to add Bootstrap to the Angular Project

Angular Features

Dynamic routing on module load of an Angular Application