UPDATE (2017–10–19): I’ve added a separate working plunk on stackblitz since Material 2 beta-12 had quite a few breaking changes to the way Material components are referenced. Please be aware of the changes when following this guide, i.e. MdDialogs should be MatDialogs now.
MdDialog had its initial release in Alpha 9 of the Angular 2 Material release which was at the time undocumented. But the module is usable in its current state, just a little confusing when you first stare at it.
So I’m going to attempt to simplify things and try to get it to the familiar style of Material 1 in the original AngularJS.
If you want to skip right to the code, you can find it here.
I’ve also added an npm package if needed, feel free to create some pull-requests to extend it: https://github.com/tariknz/md-dialogs
Before you continue
There is a chance that the article will be out of date by the time you read this, I will try to update it when ever I can. Feel free to comment if you have any questions.
Lets break it down
We want to be modular and create a dialogs module for our application. The dialogs module will contain a “confirm” dialog and the dialog service for calling that dialog.
The dialogs module will contain the component for the confirm dialog, and the service for calling it:
Component
The component is a basic html markup of the actual look of our dialog. The dialog will be placed dead centre in a container with an overlay. The component will require reference to MdDialogRef to be able to call the close(dataToReturn) method and pass in the data needed. Currently there is no styling, I’ll leave that up to you.
Keep note of title and message properties. These are set via our service.
Service
The service will act as a wrapper for MdDialog to simplify the process of calling the dialog and subscribing to it. What it will do is create an Instance of MdDialog with our custom component (ConfirmDialog). Then it will set any public properties it needs to by setting the properties on the componentInstance object. It will return the observable afterClosed() to the caller so they can subscribe to it. It will emit an event when ever the dialog is closed as the name would suggest.
Module
The module will import the modules we need from Angular Material, and provide the component and service we just built that can be consumed by other modules. Note that ConfirmDialog has been added to the entryComponents array. You need to add any component that is dynamically generated by the component factory resolver to this array.
Calling the dialog
Let’s inject our DialogsService and call our confirm dialog. The DialogsService is what we will use to open the confirm dialog component and subscribe to its close event.
That’s it!
Demo
Here is the complete plunk! https://stackblitz.com/edit/material-dialogs-sample
Feel free to comment if you have any questions.
Need more help? You can reach me at alani.co.nz.