Dialog Box Using Angular Material Library
Published on: 25th May 2018
This tutorial helps you implement different type of Dialog Box using Angular Material Library in Angular JS.
We will be creating following two files in order to demonstrate the implementation of dialog box using Angular Material Library -
- index.html file for creating the dialog box.
- dialog.js file containing AngularJs controller responsible for initializing the dialog box.
This is how our project structure looks like -
index.html
Here is how our HTML file index.html looks like -
index.html
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
</head>
<body ng-app="myApp">
<div id="dialogContainer" ng-controller="Ctrl" layout="row" ng-cloak>
<md-content>
<h4 style="margin-left:20px;">
Alert Box: <md-button style="margin-left:32px;" class="md-primary md-raised" ng-click="showAlert($event)" flex="100" flex-gt-md="auto">
Alert
</md-button>
</h4>
<h4 style="margin-left:20px;">
Confirm Box: <md-button class="md-primary md-raised" ng-click="showConfirm($event)" flex="100" flex-gt-md="auto">
Confirm
</md-button>
</h4>
<h4 style="margin-left:20px;">
Custom Box: <md-button class="md-primary md-raised" ng-click="showCustom($event)" flex="100" flex-gt-md="auto">
Custom
</md-button>
</h4>
<div ng-if="status">
<br/>
<b layout="row" layout-align="left left" class="md-padding">
{{status}}
</b>
</div>
</md-content>
</div>
</body>
</html>
Let's discuss some of AngularJs specific parts in the above HTML file. Specifically, here are the attributes that need attention -
- First we have added some libraries for Angular Material in html file head tag section as given above.
- The ng-cloak, use this directive to avoid the undesirable flicker effect caused by the html template display.
- <md-content> directive is a container element useful for scrollable content. It achieves this by setting the CSS overflow property to auto so that content can properly scroll.
- <md-button> is a button directive with optional ink ripples (default enabled).
- Flex: will grow and shrink as needed. Starts with a size of 0%. Same as flex="0".
dialog.js
Finally, here is the javascript file containing the controller for our dialog box -
dialog.js
angular.module('myApp', ['ngMaterial']).controller('Ctrl', myAppController);
function myAppController ($scope, $mdDialog) {
$scope.status = '';
var alert;
$scope.showAlert = showAlertBox;
$scope.items = ["All","Programming","Tutorials"];
function showAlertBox() {
alert = $mdDialog.alert({
title: 'Dialog Box',
textContent: 'All Programming Tutorials!',
ok: 'Close'
});
$mdDialog.show(alert).finally(function(){
alert = undefined;
});
}
$scope.showConfirm = function(event) {
var confirm = $mdDialog.confirm()
.title('Will you subscribe for All Programming Tutorials?')
.textContent('Please subscribe now for tutorials.')
.targetEvent(event)
.ok('Yes')
.cancel('No');
$mdDialog.show(confirm).then(function() {
$scope.status = 'Done!';
}, function() {
$scope.status = 'Please subscribe.';
});
};
$scope.showCustom = function(event) {
$mdDialog.show({
clickOutsideToClose: true,
scope: $scope,
preserveScope: true,
template: '<md-dialog aria-label="List dialog">' +
' <md-dialog-content>'+
' <md-list>'+
' <md-list-item ng-repeat="item in items">'+
' <p>* <b>{{item}}</b></p>' +
' '+
' </md-list-item></md-list>'+
' </md-dialog-content>' +
' <md-dialog-actions>' +
' <md-button ng-click="closeDialog()" class="md-primary">' +
' Close' +
' </md-button>' +
' </md-dialog-actions>' +
'</md-dialog>',
controller: function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
$mdDialog.hide();
}
}
});
};
}
In the above javascript file, there are a few things to note:
- $mdDialog: opens a dialog over the app to inform users about critical information or require them to make decisions.
- $mdDialog.alert(); - Builds a preconfigured dialog with the specified message.
- $mdDialog.confirm(); - Builds a preconfigured dialog with the specified message. You can call, show and the promise returned will be resolved only if the user clicks the confirm action on the dialog.
- $mdDialog.show(optionsOrPreset); - Show a dialog with the specified options.
- $mdDialog.hide([response]); - Hide an existing dialog and resolve the promise returned from $mdDialog.show().
Webpage Output in Browser
This is how the HTML code above will be displayed in a browser with Dialog Box
You can see the working demo of the above Multiple Dialog Box here.
Thank you for reading through the tutorial. In case of any feedback/questions/concerns, you can communicate same to us through your comments and we shall get back to you as soon as possible.
Published on: 25th May 2018
Comment Form is loading comments...