Reusing $mdDialog in Angular Material

Every developer knows not writing reusable code that can be made reusable is the evil that awaits to be risen sooner or later.

I wonder what the impact on code would be if the development tools didn’t allow pasting? I just had momentarily brain-wave which I didn’t spend any thoughts on yet.

Lately my work involved very useful Angular Material and inevitably $mdDialog.

Dialogs can be very useful but you should be careful not to interrupt users flow. Its recommended to use dialogs sparingly because they may end up being very interruptive. Remember that each dialog should be well justified and that it contains important information.

In general modal dialogs can come in very handy when we need to request the user to enter additional information critical to continuing the current process. The goal here is to lessen users effort to complete a process.

Exmaple Idea: Missing item in a process

Here is a nice article describing when to use and not to use dialogs if interested in more information.

Custom Preset

$mdDialog API Documentation provides a clue how to use custom presets. With custom presets we’re allowed to add to the predefined collection of prompt, alert, confirm our own.

This particular example shows how to take existing object and augment it with additional data. In practice you probably wouldn’t be only adding information to an object but also saving an item to datastore since it was missing in the original process.

We can define our custom preset in Angular configuration:

var app = angular.module('app', ['ngMaterial']).config(function ($mdDialogProvider) {

$mdDialogProvider.addPreset('personalInfo', {options: function () {return {templateUrl: 'template/my_template.person.html',controller: TemplateDialogCtrl,escapeToClose:true,clickOutsideToClose:true};}});

function TemplateDialogCtrl($scope,$http, $mdDialog, locals) {$scope.person = locals.person; // to display existing data

$scope.update = function(person) {$mdDialog.hide(person); // returning augmented object}}});

That’s it for the definition of our custom preset “personalInfo”. We defined the template and controller.

TemplateDialogController in this case takes in additional parameter “locals”. This is input object transferred from main controller to dialog controller. Example below shows passing “myobject” to personalInfo dialog controller and after receiving results storing the returning object back to myobject.

app.controller('ctrl', function($scope, $http, $mdDialog) {$scope.myobject = {'id':1, 'name':'John Doe'};

$scope.openDialog = function(myobject) {$mdDialog.show($mdDialog.personalInfo({locals: {person: myobject}})).then(function(test) {$scope.myobject = test;});}});

Here is more complete JSFiddle example

$mdDialog fiddle example

Similar technique is used in SixthMass project. SixthMass strives to marry analytics with e-mail making scheduled and automatically triggered campaigns easy and fast to implement, providing insight into user journeys from email to anywhere in your product.