Angular Material is a UI component library for Angular JS developers. Angular Material's reusable UI components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation.
Following are a few salient features of Angular Material −
In-built responsive designing.
Standard CSS with minimal footprint.
Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
Includes enhanced and specialized features like cards, toolbar, speed dial, side nav, swipe, and so on.
Cross-browser, and can be used to create reusable web components.
Responsive Design
Angular Material has in-built responsive designing so that the website created using Angular Material will redesign itself as per the device size.
Angular Material classes are created in such a way that the website can fit any screen size.
The websites created using Angular Material are fully compatible with PC, tablets, and mobile devices.
Extensible
Angular Material is by design very minimal and flat.
It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
It supports shadows and bold colors.
The colors and shades remain uniform across various platforms and devices.
And most important of all, Angular Material is absolutely free to use.
Angular Material - Environment Setup
How to Use Angular Material?
There are two ways to use Angular Material −
Local Installation − You can download the Angular Material libraries using npm, jspm, or bower on your local machine and include it in your HTML code.
CDN Based Version − You can include the angular-material.min.css and angular-material js files into your HTML code directly from the Content Delivery Network (CDN).
Local Installation
Befor we use the following npm command, we require the NodeJS installation on our system. To get information about node JS, click here and open the NodeJS command line interface. We will use the following command to install Angular Material libraries.
npm install angular-material
The above command will generate the following output −
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type = "text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML
4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
presenting content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
the Web Hypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as
Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>
The above program will generate the following result −
CDN Based Version
You can include the angular-material.css and angular-material.js files into your HTML code directly from the Content Delivery Network (CDN). Google CDN provides content for the latest version.
We are using the Google CDN version of the library throughout this tutorial.
Example
Now let us rewrite the above example using angular-material.min.css and angular-material.min.js from Google CDN.
<html lang = "en" >
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type = "text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting
content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
ypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as Adobe
Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>
The above program will generate the following result −
Angular Material - Autocomplete
The md-autocomplete, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area. <md-autocomplete> can be used to provide search results from local or remote data sources. md-autocomplete caches results when performing a query. After first call, it uses the cached results to eliminate unnecessary server requests or lookup logic and it can be disabled.
Attributes
The following table lists out the parameters and description of the different attributes of md-autocomplete.
Sr.No
Parameter & Description
1
* md-items
An expression in the format of item in items to iterate over matches for your search.
2
md-selected-item-change
An expression to be run each time a new item is selected.
3
md-search-text-change
An expression to be run each time the search text updates.
4
md-search-text
A model to bind the search query text to.
5
md-selected-item
A model to bind the selected item to.
6
md-item-text
An expression that will convert your object to a single string.
7
placeholder
Placeholder text that will be forwarded to the input.
8
md-no-cache
Disables the internal caching that happens in autocomplete.
9
ng-disabled
Determines whether or not to disable the input field.
10
md-min-length
Specifies the minimum length of text before autocomplete will make suggestions.
11
md-delay
Specifies the amount of time (in milliseconds) to wait before looking for results.
12
md-autofocus
If true, will immediately focus the input element.
13
md-autoselect
If true, the first item will be selected by default.
14
md-menu-class
This will be applied to the dropdown menu for styling.
15
md-floating-label
This will add a floating label to autocomplete and wrap it in the md-input-container.
16
md-input-name
The name attribute given to the input element to be used with the FormController.
17
md-input-id
An ID to be added to the input element.
18
md-input-minlength
The minimum length for the input's value for validation.
19
md-input-maxlength
The maximum length for the input's value for validation.
20
md-select-on-match
When set as true, autocomplete will automatically select the exact item if the search text is an exact match.
Example
The following example shows the use of the md-autocomplete directive and also the use of autocomplete.
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('autoCompleteController', autoCompleteController);
function autoCompleteController ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// list of states to be displayed
self.states = loadStates();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert("This functionality is yet to be implemented!");
}
function querySearch (query) {
var results = query ? self.states.filter( createFilterFor(query) ) :
self.states, deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () {
deferred.resolve( results );
},
Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
}
//build list of states as map of key-value pairs
function loadStates() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
return allStates.split(/, +/g).map( function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
//filter function for search query
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak>
<md-content class = "md-padding">
<form ng-submit = "$event.preventDefault()">
<p><code>md-autocomplete</code> can be used to provide search results from
local or remote data sources.</p>
<md-autocomplete
ng-disabled = "ctrl.isDisabled"
md-no-cache = "ctrl.noCache"
md-selected-item = "ctrl.selectedItem"
md-search-text-change = "ctrl.searchTextChange(ctrl.searchText)"
md-search-text = "ctrl.searchText"
md-selected-item-change = "ctrl.selectedItemChange(item)"
md-items = "item in ctrl.querySearch(ctrl.searchText)"
md-item-text = "item.display"
md-min-length = "0"
placeholder = "US State?">
<md-item-template>
<span md-highlight-text = "ctrl.searchText"
md-highlight-flags = "^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
<a ng-click = "ctrl.newState(ctrl.searchText)">Create a new one!</a>
</md-not-found>
</md-autocomplete>
<br/>
<md-checkbox ng-model = "ctrl.simulateQuery">Show progress for results?
</md-checkbox>
<md-checkbox ng-model = "ctrl.noCache">Disable caching?</md-checkbox>
<md-checkbox ng-model = "ctrl.isDisabled">Disable?</md-checkbox>
<p><code>md-autocomplete</code> caches results when performing a query.
After first call, it uses the cached results to eliminate unnecessary
server requests or lookup logic and it can be disabled.</p>
</form>
</md-content>
</div>
</body>
</html>
Result
Verify the result.
Angular Material - Bottom Sheet
The $mdBottomSheet, an Angular Service, is used to open a bottom sheet over the application and provides a simple promise API.
S.N
Method & Description
1
$mdBottomSheet.show(options);
Show a bottom sheet with the specified options.
S.N
Parameter & Description
1
* options
An options object, with the following properties −
templateUrl - {string=} − The url of an html template file that will be used as the content of the bottom sheet. Restrictions: the template must have an outer md-bottom-sheet element.
template - {string=} − Same as templateUrl, except this is an actual template string.
scope - {object=} − The scope to link the template / controller to. If none is specified, it will create a new child scope. This scope will be destroyed when the bottom sheet is removed unless preserveScope is set to true.
preserveScope - {boolean=} − It dictates whether to preserve the scope when the element is removed. By default, it is false.
controller - {string=} − The controller to associate with this bottom sheet.
locals - {string=} − An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example, locals: {three: 3} will inject three into the controller with the value of 3.
clickOutsideToClose - {boolean=} − It dictates whether the user can click outside the bottom sheet to close it. By default, it is true.
escapeToClose - {boolean=}: It dictates whether the user can press escape to close the bottom sheet. By default, it is true.
resolve - {object=} − Similar to locals, except that it takes promises as values and the bottom sheet will not open until the promises resolve.
controllerAs - {string=}: An alias to assign the controller to on the scope.
parent - {element=} − The element to append the bottom sheet to. The parent may be a function, string, object, or null. Defaults to appending to the body of the root element (or the root element) of the application. e.g. angular.element(document.getElementById('content')) or "#content".
disableParentScroll - {boolean=} − Whether to disable scrolling while the bottom sheet is open. Default true.
Sr.No
Returns & Description
1
promise
A promise that can be resolved with $mdBottomSheet.hide() or rejected with $mdBottomSheet.cancel().
Example
The following example shows the use of the $mdBottomSheet service and also the use of bottom sheet.
The md-card, an Angular Directive, is a container directive and is used to draw cards in the angularjs application. The following table lists down the angular directives and classes used in md-card.
Sr.No
Directive/Class & Description
1
<md-card-header>
Header for the card, holds avatar, text and squared image.
2
<md-card-avatar>
Card avatar.
3
md-user-avatar
Class for user image.
4
<md-icon>
Icon directive.
5
<md-card-header-text>
Contains elements for the card description.
6
md-title
Class for the card title.
7
md-subhead
Class for the card sub header.
8
<img>
Image for the card.
9
<md-card-title>
Card content title.
10
<md-card-title-text>
Card Title text container.
11
md-headline
Class for the card content title.
12
md-subhead
Class for the card content sub header.
13
<md-card-title-media>
Squared image within the title.
14
md-media-sm
Class for small image.
15
md-media-md
Class for medium image.
16
md-media-lg
Class for large image.
17
<md-card-content>
Card content.
18
md-media-xl
Class for extra large image.
19
<md-card-actions>
Card actions.
20
<md-card-icon-actions>
Icon actions.
Example
The following example shows the use of md-card directive and also the use of card classes.
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('cardController', cardController);
function cardController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<md-card>
<img ng-src = "/html5/images/html5-mini-logo.jpg" class = "md-card-image" alt = "Learn HTML5">
<md-card-header>
<md-card-avatar>
<img class = "md-user-avatar" src = "/html5/images/html5-mini-logo.jpg">
</md-card-avatar>
<md-card-header-text>
<span class = "md-title">HTML5</span>
<span class = "md-subhead">Learn HTML5 @Howcodex.com</span>
</md-card-header-text>
</md-card-header>
<md-card-title>
<md-card-title-text>
<span class = "md-headline">HTML5</span>
</md-card-title-text>
</md-card-title>
<md-card-actions layout = "row" layout-align = "start center">
<md-button>Download</md-button>
<md-button>Start</md-button>
<md-card-icon-actions>
<md-button class = "md-icon-button" aria-label = "icon">
<md-icon class = "material-icons">add</md-icon>
</md-button>
</md-card-icon-actions>
</md-card-actions>
<md-card-content>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting
content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
Web Hypertext Application Technology Working Group (WHATWG).</p>
</p>The new standard incorporates features like video playback and
drag-and-drop that have been previously dependent on third-party browser
plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
</md-card-content>
</md-card>
</body>
</html>
Result
Verify the result.
Angular Material - Widgets
Angular Material provides a rich library of UI widgets. This allows users to have advanced interaction capability with the application.
The following table lists down a few important Widgets with their description −
The md-button, an Angular Directive, is a button directive having optional ink ripples (and are by default enabled). If href or ng-href attribute is provided, then this directive acts as an anchor element.
The md-content, an Angular Directive, is a container element and is used for scrollable content. The layout-padding attribute can be added to have padded content.
The md-dialog, an Angular Directive, is a container element and is used to display a dialog box. Its element md-dialog-content contains the content of the dialog and the md-dialog-actions is responsible for dialog actions.
The mdDialog, an Angular Service, opens a dialog over the application to keep the users informed and help them make decisions.
The md-divider, an Angular Directive, is a rule element and is used to display a thin lightweight rule to group and divide contents within lists and page layouts.
The md-list, an Angular directive, is a container component that contains md-list-item elements as a children. The md-list-item directive is a container component for row items of md-list container. CSS classes md-2-line and md-3-line can be added to md-list-item to increase the height of row with 22px and 40px respectively.
The md-menu, an Angular directive, is a component to display addition options within the context of action performed. The md-menu has two child elements. The first element is the trigger element and is used to open the menu. The second element is the md-menu-content to represent the content of the menu when the menu is opened. The md-menu-content usually carries the menu items as md-menu-item.
The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. The md-radio-group is the grouping container for md-radio-button elements.
The Angular Material provides various special methods to show unobtrusive tooltips to the users. Angular Material provides ways to assign directions for them and md-tooltip directive is used to show tooltips. A tooltip activates whenever the user focuses, hovers over, or touches the parent component.
The md-chips, an Angular Directive, is used as a special component called the Chip and can be used to represent small set of information for example, a contact, tags etc. Custom template can be used to render the content of a chip. This can be achieved by specifying an md-chip-template element having the custom content as a child of md-chips.
The md-contact-chips, an Angular Directive, is an input control built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. A user can select one of these and add it to the list of availble chips.
Angular Material - Layouts
Layout Directive
Layout directive on a container element is used to specify the layout direction for its children. Following are the assignable values for the Layout Directive −
row − Items are arranged horizontally with max-height = 100% and max-width is the width of the items in the container.
column − Items are arranged vertically with max-width = 100% and max-height is the height of the items in the container.
For responsive design such as layout to be automatically changed depending upon the device screen size, the layout APIs listed in the following table can be used to set the layout direction for devices with view widths.
Sr.No
API & Device width when breakpoint overrides default
1
layout
Sets default layout direction unless overridden by another breakpoint.
2
layout-xs
width < 600px
3
layout-gt-xs
width >= 600px
4
layout-sm
600px <= width < 960px
5
layout-gt-sm
width >= 960px
6
layout-md
960px <= width < 1280px
7
layout-gt-md
width >= 1280px
8
layout-lg
1280px <= width < 1920px
9
layout-gt-lg
width >= 1920px
10
layout-xl
width >= 1920px
Example
The following example shows the use of layout directive and also the uses of layout.
The flex directive on a container element is used to customize the size and position of the elements. It defines the way how the element is to adjust its size with respect to its parent container and the other elements within the container. Following are the assignable values for the flex directive −
multiples of 5 − 5, 10, 15 ... 100
33 − 33%
66 − 66%
Example
The following example shows the use of the flex directive and also the uses of flex.
The md-input-container, an Angular directive, is a container component that contains any <input> or <textarea> element as a child. It also supports error handling using the standard ng-messages directives and animates the messages using the ngEnter/ngLeave events or the ngShow/ngHide events.
Attributes
The following table lists out the parameters and description of the different attributes of the md-input-container.
Sr.No
Parameter & Description
1
md-maxlength
The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input. The purpose of the md-maxlength is to show the max length counter text. If you don't want the counter text and only need "plain" validation, you can use the "simple" ng-maxlength or maxlength attributes.
2
aria-label
Aria-label is required when no label is present. A warning message will be logged in the console if a label is not present.
3
placeholder
An alternative approach to using aria-label when the label is not present. The placeholder text is copied to the aria-label attribute.
4
md-no-autogrow
When present, the textareas will not grow automatically.
5
md-detect-hidden
When present, the textareas will be sized properly when they are revealed after being hidden. This is off by default for performance reasons because it guarantees a reflow every digest cycle.
Example
The following example shows the use of the md-input-container directive and also the uses of inputs.
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('inputController', inputController);
function inputController ($scope) {
$scope.project = {
comments: 'Comments',
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "inputContainer" class = "inputDemo"
ng-controller = "inputController as ctrl" ng-cloak>
<md-content layout-padding>
<form name = "projectForm">
<md-input-container class = "md-block">
<label>User Name</label>
<input required name = "userName" ng-model = "project.userName">
<div ng-messages = "projectForm.userName.$error">
<div ng-message = "required">This is required.</div>
</div>
</md-input-container>
<md-input-container class = "md-block">
<label>Email</label>
<input required type = "email" name = "userEmail"
ng-model = "project.userEmail"
minlength = "10" maxlength = "100" ng-pattern = "/^.+@.+\..+$/" />
<div ng-messages = "projectForm.userEmail.$error" role = "alert">
<div ng-message-exp = "['required', 'minlength', 'maxlength',
'pattern']">
Your email must be between 10 and 100 characters long and should
be a valid email address.
</div>
</div>
</md-input-container>
<md-input-container class = "md-block">
<label>Comments</label>
<input md-maxlength = "300" required name = "comments"
ng-model = "project.comments">
<div ng-messages = "projectForm.comments.$error">
<div ng-message = "required">This is required.</div>
<div ng-message = "md-maxlength">The comments has to be less
than 300 characters long.</div>
</div>
</md-input-container>
</form>
</md-content>
</div>
</body>
</html>
Result
Verify the result.
Angular Material - Icons
The md-icon, an Angular directive, is a component to show vector-based icons in application. It supports icon fonts and SVG icons also apart from using the Google Material Icons.
Attributes
The following table lists out the parameters and description of the different attributes of md-icon.
Sr.No
Parameter & Description
1
* md-font-icon
This is the string name of CSS icon associated with the font-face, which will be used to render the icon. Requires the fonts and the named CSS styles to be preloaded.
2
* md-font-set
This is the CSS style name associated with the font library, which will be assigned as the class for the font-icon ligature. This value may also be an alias that is used to lookup the classname; internally use $mdIconProvider.fontSet(<alias>) to determine the style name.
3
* md-svg-src
This is the String URL (or expression) used to load, cache, and display an external SVG.
4
* md-svg-icon
This is the string name used for lookup of the icon from the internal cache; interpolated strings or expressions may also be used. Specific set names can be used with the syntax <set name>:<icon name>. To use icon sets, developers are required to pre-register the sets using the $mdIconProvider service.
5
aria-label
This labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden = "true". If there's no aria-label on the icon nor a label on the parent element, a warning will be logged to the console.
6
alt
This labels icon for accessibility. If an empty string is provided, icon will be hidden from accessibility layer with aria-hidden = "true". If there's no alt on the icon nor a label on the parent element, a warning will be logged to the console.
Example
The following example shows the use of md-icons directive and also the uses of icons.
The md-grid-list, an Angular directive, is a component for laying out content for varying screen sizes. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size have predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined.
Attributes
The following table lists out the parameters and description of the different attributes of md-grid-list.
Sr.No
Parameter & Description
1
* md-cols
This is for the number of columns in the grid.
2
* md-row-height
One of
CSS length − Fixed height rows (eg. 8px or 1rem).
{width}:{height} − Ratio of width to height (eg. md-row-height = "16:9").
"fit" − Height will be determined by subdividing the available height by the number of rows.
3
md-gutter
The amount of space between tiles in CSS units (default 1px).
4
md-on-layout
Expression to evaluate after layout. Event object is available as $event, and contains performance information.
Example
The following example shows the use of the md-grid-list directive and also the uses of grid.
The md-sidenav, an Angular directive is used to show a container component which can be shown or hide programmatically. It slides out over the top of the main content region by default.
Attributes
The following table lists out the parameters and description of the different attributes of md-sidenav
Sr.No
Parameter & Description
1
md-is-open
A model bound to whether the sidenav is opened.
2
md-component-id
componentId to use with $mdSidenav service.
3
md-is-locked-open
When this expression evalutes to true, the sidenav 'locks open': it falls into the content's flow instead of appearing over it. This overrides the is-open attribute. The $mdMedia() service is exposed to the is-locked-open attribute, which can be given a media query or one of the sm, gt-sm, md, gt-md, lg or gt-lg presets.
Examples −
<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav>
<md-sidenav md-is-locked-open = "$mdMedia('min-width: 1000px')"></mdsidenav>
<md-sidenav md-is-locked-open = "$mdMedia('sm')"></md-sidenav> <!--(locks open on small screens)-->
Example
The following example shows the use of md-sidenav and also the uses of the sidenav component.
The Angular Material components use the intention group classes like md-primary, md-accent, md-warn and additional classes for color differences like md-hue-1, md-hue-2, or md-hue-3. The following components supporrt the use of the above mentioned classes.
md-button
md-checkbox
md-progress-circular
md-progress-linear
md-radio-button
md-slider
md-switch
md-tabs
md-text-float
md-toolbar
Themes can be configured using $mdThemingProvider during application configuration. The following properties can be used to assign different color palletes.
primaryPalette
accentPalette
warnPalette
backgroundPalette
Example
The following example shows the use of themes in Angular JS application.
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('themeController', themeController)
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('customTheme')
.primaryPalette('grey')
.accentPalette('orange')
.warnPalette('red');
});
function themeController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "themeContainer" ng-controller = "themeController as ctrl" ng-cloak>
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Default Theme</h2>
</div>
</md-toolbar>
<hr/>
<md-card>
<md-card-content layout = "column">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
</div></md-toolbar>
<md-toolbar class = "md-accent">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
</div>
</md-toolbar>
</md-card-content>
</md-card>
<div md-theme = "customTheme">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Custom Theme</h2>
</div>
</md-toolbar>
<hr/>
<md-card>
<md-card-content layout = "column">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
</div>
</md-toolbar>
</md-card-content>
</md-card>
</div>
</div>
</body>
</html>
Result
Verify the result.
Angular Material - Toasts
The Angular Material provides various special methods to show unobtrusive alerts to the users. It also provides a term toast for them. The $mdToast service is used to show toasts.
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('typographyController', typographyController);
function typographyController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "frameContainer" ng-controller = "typographyController as ctrl"
layout = "column" layout-padding layout-wrap layout-fill
style = "padding-bottom: 32px;" ng-cloak>
<p class = "md-display-4">.md-display-4</p>
<p class = "md-display-3">.md-display-3</p>
<p class = "md-display-2">.md-display-2</p>
<p class = "md-display-1">.md-display-1</p>
<p class = "md-headline">.md-headline</p>
<p class = "md-title">.md-title</p>
<p class = "md-subhead">.md-subhead</p>
<p class = "md-body-1">.md-body-1</p>
<p class = "md-body-2">.md-body-2</p>
<md-button>.md-button</md-button>
<p class = "md-caption">.md-caption</p>
</div>
</body>
</html>
Result
Verify the result.
Angular Material - Virtual Repeat
The md-virtual-repeat-container is the scroll container for the md-virtual-repeat component.
Attributes
The following table lists out the parameters and description of the different attributes of md-virtual-repeat-container.
Sr.No
Parameter & Description
1
md-top-index
Binds the index of the item that is at the top of the scroll container to $scope. It can both read and set the scroll position.
2
md-orient-horizontal
Determines whether the container should scroll horizontally (defaults to orientation and scrolling vertically).
3
md-auto-shrink
When present, the container will shrink to fit the number of items when that number is less than its original size.
4
md-auto-shrink-min
Minimum number of items that md-auto-shrink will shrink to (default: 0).
md-virtual-repeat
Virtual repeat is a substitute for ng-repeat to renders only enough html elements to fill the container and reuse them when the user scrolls.
Attributes
The following table lists out the parameters and description of the different attributes of md-virtual-repeat.
Sr.No
Parameter & Description
1
md-item-size
The height or width of the repeated elements (which must be identical for each element). This is optional. This attempts to read the size from the dom if missing, but still assumes that all repeated nodes have same height or width.
2
md-extra-name
Evaluates to an additional name to which the current iterated item can be assigned on the repeated scope (needed for use in md-autocomplete).
3
md-on-demand
When present, treats the md-virtual-repeat argument as an object that can fetch rows rather than an array.This object must implement the following interface with two (2) methods −
getItemAtIndex − function(index) [object] - The item at that index or null if it is not yet loaded (it should start downloading the item in that case).
getLength − function() [number] - The data length to which the repeater container should be sized. Ideally, when the count is known, this method should return it. Otherwise, return a higher number than the currently loaded items to produce an infinite-scroll behavior.
Example
The following example showe the use of virtual repeat.
