A Declarative Dialog For Angular Material
A Nice Addition to MatDialogModule
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
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.
The dialog component basic structure is simple:
The component template is nothing more than a
<ng-template> containing the transcluded content from the parent container.
open(), the component reverts to the MatDialog service to display the dialog using the template reference got with
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
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
close() I believe there’s no need to comment any further, the component offers
closed/closedChange paired input/outputs:
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.
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.
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:
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
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: