Scribd
Upload
533 views

Angular Material Tutorial PDF

Uploaded by

swathi sree
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
533 views

Angular Material Tutorial PDF

Uploaded by

swathi sree
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Angular Material

i
Angular Material

About the Tutorial


Angular Material is a UI component library for Angular JS developers. Angular Material
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. It helps in creating faster, beautiful, and responsive
websites. It is inspired by the Google Material Design.

Audience
This tutorial is meant for professionals who aspire to learn the basics of Angular Material and
how to use it to create faster, beautiful, and responsive websites. This tutorial explains the
fundamental concepts of Angular Material.

Prerequisites
Before proceeding with this tutorial, you should have a basic understanding of Angular JS,
HTML, CSS, JavaScript, Document Object Model (DOM), and any text editor. In addition, it will
help if you know how web-based applications work.

Execute Angular Material Online


For most of the examples given in this tutorial, you will find a Try-it option. Use this option to
execute your Angular Material programs then and there and enjoy your learning.

Try the following example using the Try-it option available at the top right corner of the
following sample code box –

<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']);

i
Angular Material

</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>

Copyright & Disclaimer


 Copyright 2017 by Tutorials Point (I) Pvt. Ltd.

All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt.
Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any
contents or a part of contents of this e-book in any manner without written consent of the
publisher.

We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd.
provides no guarantee regarding the accuracy, timeliness or completeness of our website or its
contents including this tutorial. If you discover any errors on our website or in this tutorial,
please notify us at [email protected]

ii
Angular Material

Table of Contents
About the Tutorial ............................................................................................................................................. i

Audience ........................................................................................................................................................... i

Prerequisites ..................................................................................................................................................... i

Execute Angular Material Online ....................................................................................................................... i

Copyright & Disclaimer ..................................................................................................................................... ii

Table of Contents ............................................................................................................................................ iii

1. ANGULAR MATERIAL – OVERVIEW .............................................................................................. 1

2. ANGULAR MATERIAL – ENVIRONMENT SETUP ............................................................................. 2

How to Use Angular Material? ......................................................................................................................... 2

Local Installation .............................................................................................................................................. 2

CDN Based Version ........................................................................................................................................... 4

3. ANGULAR MATERIAL – AUTOCOMPLETE...................................................................................... 6

Attributes ......................................................................................................................................................... 6

4. ANGULAR MATERIAL – BOTTOM SHEET ..................................................................................... 13

5. ANGULAR MATERIAL – CARDS.................................................................................................... 17

6. ANGULAR MATERIAL – WIDGETS ............................................................................................... 23

Angular Material – Buttons ............................................................................................................................ 26

Angular Material – CheckBoxes ...................................................................................................................... 33

Angular Material – Content ............................................................................................................................ 35

Angular Material – DatePicker........................................................................................................................ 37

Angular Material – Dialogs ............................................................................................................................. 41

Angular Material – Divider ............................................................................................................................. 45

Angular Material – List ................................................................................................................................... 48

iii
Angular Material

Angular Material – Menu ............................................................................................................................... 51

Angular Material - Menu Bar .......................................................................................................................... 54

Angular Material – Progress Bars ................................................................................................................... 57

Angular Material – Radio Buttons .................................................................................................................. 64

Angular Material – Selects .............................................................................................................................. 67

Angular Material – Fab Toolbars..................................................................................................................... 70

Angular Material – Sliders .............................................................................................................................. 73

Angular Material – Tabs ................................................................................................................................. 76

Angular Material – Toolbars ........................................................................................................................... 80

Angular Material – Tooltips ............................................................................................................................ 84

Angular Material – Chips ................................................................................................................................ 87

Angular Material – Contact Chips ................................................................................................................... 92

7. ANGULAR MATERIAL – LAYOUTS................................................................................................ 97

Layout Directive ............................................................................................................................................. 97

Flex Directive ................................................................................................................................................ 100

8. ANGULAR MATERIAL – INPUTS ................................................................................................ 103

9. ANGULAR MATERIAL – ICONS .................................................................................................. 107

10. ANGULAR MATERIAL – GRIDS .................................................................................................. 112

Attributes ..................................................................................................................................................... 112

11. ANGULAR MATERIAL – SIDENAV .............................................................................................. 116

12. ANGULAR MATERIAL – FAB SPEED DIAL ................................................................................... 119

Attributes ..................................................................................................................................................... 119

13. ANGULAR MATERIAL – SUBHEADERS ....................................................................................... 124

14. ANGULAR MATERIAL – SWIPE .................................................................................................. 127

iv
Angular Material

15. ANGULAR MATERIAL – SWITCHES ............................................................................................ 130

16. ANGULAR MATERIAL – THEME................................................................................................. 135

17. ANGULAR MATERIAL – TOASTS ................................................................................................ 139

18. ANGULAR MATERIAL – TYPOGRAPHY ....................................................................................... 141

19. ANGULAR MATERIAL – VIRTUAL REPEAT.................................................................................. 144

Attributes ..................................................................................................................................................... 144

md-virtual-repeat ......................................................................................................................................... 144

20. ANGULAR MATERIAL – WHITEFRAME ...................................................................................... 150

v
1. ANGULAR MATERIAL – OVERVIEW Angular Material

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.

6
2. ANGULAR MATERIAL – ENVIRONMENT SETUP Angular Material

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 −

[email protected] node_modules\angular-animate

[email protected] node_modules\angular-aria

[email protected] node_modules\angular-messages

[email protected] node_modules\angular

[email protected] node_modules\angular-material

npm will download the files under node_modules > angular-material folder. Include the
files as explained in the following example −

Example
Now you can include the css and js file in your HTML file as follows −

<html lang="en" >

7
Angular Material

<head>
<link rel="stylesheet" href="/node_modules/angular-material/angular-
material.css">
<script src="/node_modules/angular-material/angular.js"></script>
<script src="/node_modules/angular-material/angular-animate.js"></script>
<script src="/node_modules/angular-material/angular-aria.js"></script>
<script src="/node_modules/angular-material/angular-messages.js"></script>
<script src="/node_modules/angular-material/angular-material.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 –

8
Angular Material

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"></scrip
t>
<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']);

9
Angular Material

</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 –

10
3. ANGULAR MATERIAL – AUTOCOMPLETE Angular Material

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.

S.No. Parameter & Description

* md-items
1
An expression in the format of item in items to iterate over matches for your search.

md-selected-item-change
2
An expression to be run each time a new item is selected.

md-search-text-change
3
An expression to be run each time the search text updates.

md-search-text
4
A model to bind the search query text to.

md-selected-item
5
A model to bind the selected item to.

md-item-text
6
An expression that will convert your object to a single string.

placeholder
7
Placeholder text that will be forwarded to the input.

11
Angular Material

S.No. Parameter & Description

md-no-cache
8
Disables the internal caching that happens in autocomplete.

ng-disabled
9
Determines whether or not to disable the input field.

md-min-length
10
Specifies the minimum length of text before autocomplete will make suggestions.

md-delay
11
Specifies the amount of time (in milliseconds) to wait before looking for results.

md-autofocus
12
If true, will immediately focus the input element.

md-autoselect
13
If true, the first item will be selected by default.

md-menu-class
14
This will be applied to the dropdown menu for styling.

md-floating-label
15
This will add a floating label to autocomplete and wrap it in the md-input-container.

md-input-name
16
The name attribute given to the input element to be used with the FormController.

md-input-id
17
An ID to be added to the input element.

md-input-minlength
18
The minimum length for the input's value for validation.

19 md-input-maxlength

12
Angular Material

S.No. Parameter & Description

The maximum length for the input's value for validation.

md-select-on-match
20 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.

am_autocomplete.htm

<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"></scrip
t>
<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;

13
Angular Material

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,\

14
Angular Material

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 {

15
Angular Material

End of ebook preview


If you liked what you saw…
Buy it from our store @ https://store.tutorialspoint.com

16

You might also like