A Declarative Dialog For Angular Material

A Nice Addition to MatDialogModule

Lucio Francisco
Dec 11, 2019 · 3 min read
Photo by Goran Ivos on Unsplash

Adding a dialog to your Angular application is pretty straight forward thanks to MatDialogModule from Angular Material, provided you’re fine with the Material style.

The module revolves around the MatDialog service you can use to display your dialog imperatively by calling its open() method passing along a component or a template to render as the dialog body.

Although this is a very powerful and flexible approach, enabling both components and services with the ability to display popups, I always felt like a declarative version was missing.

That’s when I decided to implement wm-dialog:

Dialog Usage Example

In the simple example above, the dialog template is defined by the transcluded content of wm-dialog enabling a way more intimate interaction between the container and the dialog content.

Dialog Component

The dialog component basic structure is simple:

Dialog Component Basic Structure

The component template is nothing more than a <ng-template> containing the transcluded content from the parent container.

When calling open(), the component reverts to the MatDialog service to display the dialog using the template reference got with @ViewChild().

Configuring the Dialog

When opening a dialog with the MatDialog service there’s the possibility of configuring the dialog features passing along a MatDialogConfig object.

In this implementation, I felt like using inputs to replicate the configuration content within the component body itself, so, passing along this will do just fine when calling open():

Configuring the Dialog

In the code above you’ll see there’s an input for each property of the MatDialogConfig replicating the same default values.

Opening and Closing the Dialog

In order to provide multiple options, besides the methods open() and close() I believe there’s no need to comment any further, the component offers opened/openedChange and closed/closedChange paired input/outputs:

Opening and Closing the Dialog

So, basically, setting the opened input to true will display the dialog while openedChange will emit true after the dialog has opened and false after it has been closed.

Similarly, setting closed to whatever value will close the dialog while closedChange will emit the closing value after the dialog has been closed.

Obviously, both outputs will emit the relevant values no matter if the dialog has been opened or closed by mean of the corresponding methods or inputs.

Faking MatDialogRef

As you may have noticed, the dialog template in our example makes use of all the existing MatDialog directives such as MatDialogTitle, MatDialogContent, MatDialogActions, and MatDialogClose working like charm.

Most of them are about styling only, so, there are no special tricks needed for them, however, getting MatDialogClose to work is a different story:

Faking MatDialogRef

MatDialogClose relies on the MatDialogRef instance injected in its constructor to close the dialog when clicked.

However, our implementation breaks this mechanism since the directive is actually constructed well before the creation of the dialog where the template will be rendered into, so, the dialog reference doesn’t exist yet.

To work around this issue, we provide our own MatDialogRef instance recycling the existing DialogComponent instance, so, once the directive will call upon the close() method, the component will revert to the now existing MatDialogRef.

Try it Yourself

The code described here is part of wizdm.io, an open-source project hosted on Github. Feel free to reach me out at hello@wizdm.io for whatever question or curiosity.

A similar code is also at the base of Handling Unsaved Changes with a Pop-up Dialog you may want to take a look at.

Additionally, a fully functional demo of the code described here is available live on StackBlitz:

Live demo on StackBlitz

Wizdm Genesys

An attempt in combining modern software development with ancient wisdom

Lucio Francisco

Written by

I believe that whatever problem we’re puzzling ourselves with, once we really get to the bottom of it the solution has to be simple

Wizdm Genesys

An attempt in combining modern software development with ancient wisdom

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade