Angular Material

angular-material
#angular-
material
Table of Contents
About 1
Chapter 1: Getting started with angular-material 2
Remarks 2
Versions 2
Examples 4
Installation or Setup 4
Installing Angular Material 4
Getting Started (blank shell) 5
Setting up with the CDN 6
Master (HEAD) 7
Chapter 2: md-button 9
Examples 9
Types of 9
Creating an icon button 10
Standard button 11
Chapter 3: md-card 13
Introduction 13
Remarks 13
Examples 13
Basic card with header 13
Card with actions 13
Card with Avatar and image 14
Chapter 4: md-chips 15
Examples 15
Static chips 15
Setting the delay to select a new chip before refocusing on the input (1.1.2) 15
Credits 17
About
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: angular-material
It is an unofficial and free angular-material ebook created for educational purposes. All the content
is extracted from Stack Overflow Documentation, which is written by many hardworking individuals
at Stack Overflow. It is neither affiliated with Stack Overflow nor official angular-material.
The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.
Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to [email protected]
https://riptutorial.com/ 1
Chapter 1: Getting started with angular-
material
Remarks
Angular Material is an UI component framework that allows you to produce single-page-application
using a set of predefined components and directives.
Versions
Version Release Date
1.1.4 2017-04-20
1.1.3 2017-01-31
1.1.2 2017-01-05
1.1.1 2016-09-01
1.1.0 2016-08-14
1.1.0-rc5 2016-06-03
1.1.0-rc4 2016-04-15
1.1.0-rc2 2016-03-30
1.1.0-rc1 2016-03-09
1.0.9 2016-05-19
1.0.8 2016-04-28
1.0.7 2016-04-01
1.0.6 2016-02-29
1.0.5 2016-02-04
1.0.4 2016-01-28
1.0.3 2016-01-21
1.0.2 2016-01-14
1.0.1 2015-12-17
1.0.0 2015-12-14
1.0.0-rc7 2015-12-08
1.0.0-rc6 2015-12-02
1.0.0-rc5 2015-11-25
1.0.0-rc4 2015-11-13
1.0.0-rc3 2015-11-06
1.0.0-rc2 2015-10-29
1.0.0-rc1 2015-10-21
0.11.4 2015-10-13
0.11.3 2015-10-12
0.11.2 2015-10-01
0.11.1 2015-09-25
0.11.0 2015-09-08
0.11.0-rc2 2015-09-03
0.11.0-rc1 2015-09-01
0.10.1 2015-08-11
0.10.0 2015-06-15
0.9.8 2015-06-08
0.9.8-rc1 2015-06-05
0.9.7 2015-06-01
0.9.5 2015-05-28
0.9.4 2015-05-15
0.9.3 2015-05-14
0.9.0 2015-05-04
0.9.0-rc3 2015-04-28
0.9.0-rc2 2015-04-20
0.9.0-rc1 2015-04-14
0.8.3 2015-03-03
0.8.2 2015-02-27
0.8.1 2015-02-24
0.8.0 2015-02-23
0.7.1 2015-01-30
0.7.0 2015-01-24
0.7.0-rc3 2015-01-14
0.7.0-rc2 2015-01-08
0.7.0-rc1 2014-12-19
0.6.1 2014-12-08
0.6.0-rc3 2014-11-26
0.6.0-rc2 2014-11-24
0.6.0-rc1 2014-11-18
0.5.1 2014-10-31
0.4.2 2014-10-16
0.4.1 2014-10-15
0.4.0 2014-10-06
0.0.3 2014-09-19
Examples
Installation or Setup
Installing Angular Material

npm
npm install angular-material --save
bower
bower install angular-material --save
jspm
jspm install angular-material
From Cloud
cdnjs | jsdelivr | googlecdn
Getting Started (blank shell)

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>



<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-
animate.min.js"></script>
aria.min.js"></script>
messages.min.js"></script>


<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-
material.min.js"></script>


<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
Setting up with the CDN
in the index.html, link the CSS from Google CDN
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
Required dependencies:
• angular
• angular-aria
• angular-animate
• angular-messages

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-
Link: https://material.angularjs.org/latest/getting-started
index.html
<!DOCTYPE html>
<html ng-app="angularMaterial">
<head>
<link
rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-
material.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script src="app.js"></script>
<title>Angular Material</title>
</head>
<body ng-controller="MainController">
<md-content>{{content}}</md-content>
</body>
</html>
app.js
angular.module('angularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])

.controller('MainController', function($scope) {
$scope.content = "Your content goes here.";
})
Master (HEAD)
index.html:
<html ng-app="masterAngularMaterial">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script

<script src="https://cdn.rawgit.com/angular/bower-material/master/angular-
<link href="https://cdn.rawgit.com/angular/bower-material/master/angular-
material.min.css" rel="stylesheet">
<script src="/path/to/app.js"></script>
</head>
<body>
<md-content ng-controller="SomeController">
{{content}}
</md-content>
</body>
</html>
app.js:
angular.module('masterAngularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])

.controller('SomeController', function($scope) {
$scope.content="Your content here.";
})
Note that importing from https://raw.githubusercontent.com will show this error:
Refused to execute script from 'https://raw.githubusercontent.com/angular/bower-

material/master/angular-material.min.js' because its MIME type ('text/plain') is not
executable, and strict MIME type checking is enabled.
Read Getting started with angular-material online: https://riptutorial.com/angular-
material/topic/2527/getting-started-with-angular-material
Chapter 2: md-button
Examples
Types of
Make sure you link the Angular and Angular Material libraries!
index.html:
<html ng-app="mdButtonApp">
<head>

<script
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-
</head>
<body>
<md-content ng-controller="mdButtonController">

<md-button>Normal</md-button>
<md-button class="md-primary">{{text}}</md-button>
<md-button class="md-accent">{{text}}</md-button>
<md-button class="md-warn" ng-href="{{link}}">Google</md-button>
<md-button class="md-raised" ng-click="goToLink('http://example.com')">Link</md-
button>
<md-button class="md-cornered md-primary md-hue-1">{{text}}</md-button>
<md-button class="md-accent md-hue-2">Some Button</md-button>
<md-button class="md-warn md-hue-3" ng-href="{{link}}">{{text}}</md-button>
</md-content>
</body>
</html>
app.js:
angular.module('mdButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])

.controller('mdButtonController', function($scope) {
$scope.text = "Button";
$scope.link = "https://google.com";
$scope.goToLink = function(link) {
// Go to some site
console.log('Redirecting to:' + link);
window.location.href=link;
}
})
Creating an icon button
This example will be using the class md-icon-button, which must be applied to <md-button> in order
to get an icon button.
• It is also recommended to add an aria-label attribute to <md-button> for accessibility purpose

or the ARIA provider will throw a warning that there is no aria-label.
• Usually, there is an <md-icon> element in the <md-button> attribute.
• Optionally, there also may be an <md-tooltip> element to provide tooltips for the button.
This example will be using Material Icons by Google.
index.html:
<html ng-app="mdIconButtonApp">
<head>

<script
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<style>
body {
font-family: Roboto, sans-serif;
}
</style>
</head>
<body>
<md-content ng-controller="mdIconButtonController">

<md-button class="md-icon-button" aria-label="{{ariaLabel}}">
<md-icon class="material-icons">menu</md-icon>
</md-button>
<md-button class="md-primary md-icon-button" aria-label="{{ariaLabel}}">
<md-icon class="material-icons">menu</md-icon>
<md-tooltip>This is a tooltip!</md-tooltip>
</md-button>
<md-button class="md-accent md-icon-button md-fab" ng-
click="goToLink('https://github.com/android')" aria-label="Go To Android">
<md-icon class="material-icons">android</md-icon>
</md-button>
<md-button class="md-warn md-icon-button" ng-href="{{link}}" aria-
label="{{ariaLabel}}">
<md-icon class="material-icons">{{icon}}</md-icon>
</md-button>
<md-button class="md-raised md-icon-button" ng-
click="goToLink('http://example.com')">

<md-icon md-svg-icon="link"></md-icon>
</md-button>
<md-button class="md-cornered md-primary md-hue-1 md-icon-button" aria-
label="{{ariaLabel}}">

<md-icon md-svg-src="/path/to/more.svg"></md-icon>
</md-button>
<md-button class="md-accent md-hue-2" aria-label="{{ariaLabel}}">
<md-icon class="material-icons">g-translate</md-icon>
</md-button>
<md-button class="md-warn md-hue-3 md-icon-button" ng-href="{{link}}" aria-
label="Link">
<md-icon md-svg-icon="copyright"></md-icon>
</md-button>
</md-content>
</body>
</html>
app.js:
angular.module('mdIconButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])

.config(function($mdIconProvider) {
// Configure iconsets: More info:
https://material.angularjs.org/latest/api/service/$mdIconProvider
$mdIconProvider.iconSet('/path/to/media-icons.svg')
.defaultIconSet('/path/to/icons.svg')
.icon('sample-icon', '/path/to/sample-icon.svg');
})
.controller('mdIconButtonController', function($scope) {
$scope.ariaLabel = "Button";
$scope.icon = "menu";
$scope.link = "https://google.com";
$scope.goToLink = function(link) {
// Go to some site
console.log('Redirecting to:' + link);
window.location.href=link;
}
})
Standard button
So, well, how on earth do you create a <md-button>, you may ask? All you have to do is to enter a
<md-button>, along with your text for the button in it.
index.html:
<div ng-app="MdButtonApp">
<md-content ng-controller="Controller">
<h2 class="md-title">Simple <code>md-button</code></h2>
<md-button>Some button</md-button>
</md-content>
</div>
app.js:
// Just initialize the app

angular.module('MdButtonApp', ['ngMaterial'])
.controller('Controller', function($scope) {})
Codepen Demo
Read md-button online: https://riptutorial.com/angular-material/topic/8691/md-button
Chapter 3: md-card
Introduction
This topic is about how to create a <md-card>, which you can use for blog posts and other things.
Remarks
API Documentation: mdCard
Examples
Basic card with header
<md-card>
<md-card-header>
<md-card-header-text>
<span class="md-title">This will be the title</span>
<span class="md-subhead">Here goes the (smaller, lighter) sub-header</span>
</md-card-header-text>
</md-card-header>
<md-card-content>
<p>
Your content goes here!
</p>
</md-card-content>
</md-card>
Card with actions
If you want your card to include buttons, use the md-card-actions directive. Buttons can also be
formatted differently for icon-only buttons. Search for icons at here if you're using Google's
Material Icons.
<md-card>

<md-card-content>
<p>
Your content goes here!
</p>
</md-card-content>
<md-card-actions>
<md-button>Save</md-button>
<md-button>Cancel</md-button>
<md-card-icon-actions>
<md-button aria-label="icon" class="md-icon-button">
<md-icon>help</md-icon>
</md-button>
</md-card-icon-actions>
</md-card-actions>
</md-card>
Card with Avatar and image
If you want an avatar to appear on the card, use the <md-card-avatar> directive, which must be
placed within the <md-card-header> directive. The <md-card-avatar> directive accepts an <img /> tag.
Optional: .md-user-avatar, which makes the <img /> tag have a circle look.
index.html:
<md-card>
<md-card-header>

<md-card-avatar>
<img src="/path/to/avatar.svg" class="md-user-avatar"/>
</md-card-avatar>

<md-card-header-text>
<span class="md-title">Lorem</span>
<span class="md-subhead">Ipsum</span>
</md-card-header-text>
</md-card-header>

<img src="/path/to/cardimage.svg" class="md-card-image" alt="Card Image">

<md-card-title>
<md-card-title-text>
<span class="md-headline">Card header</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere et risus
sed finibus. Nunc vestibulum sagittis enim ut sagittis.</p>
</md-card-content>
</md-card>
Read md-card online: https://riptutorial.com/angular-material/topic/6571/md-card
Chapter 4: md-chips
Examples
Static chips
This example uses <md-chips> and <md-chip>.
NOTE: Static chips cannot be selected, removed or edited, and are not part of any model. If no ng-
model is provided, there are no input elements in <md-chips>.
index.html:
<md-content ng-controller="ChipController">
<md-chips>
<md-chip>Test</md-chip>
<md-chip>Another chip</md-chip>
<md-chip>{{chip}}</md-chip>
</md-chips>
app.js:
var app = angular.module('SomeApp', [/* Your dependencies here */ 'ngMaterial'])

app.controller('ChipController', function($scope) {
$scope.chip = "$scope";
})
Setting the delay to select a new chip before refocusing on the input (≥1.1.2)
1.1.2
(This content is only relavant for versions 1.1.2 and up)
From versions 1.1.2 and up, you can set the delay to select a new chip before refocusing on the
input.
Use the md-chip-append-delay attribute to set it (in milliseconds):
Example:
<md-chips md-chip-append-delay="500" ng-model="chipsModel" placeholder="Chips"></md-chips>
According to angular-material:
This is necessary for keyboard accessibility for screen readers. It defaults to 300ms
and any number less than 300 can cause issues with screen readers (particularly
JAWS and sometimes NVDA).
Read md-chips online: https://riptutorial.com/angular-material/topic/9306/md-chips
Credits
S.
Chapters Contributors
No
Getting started with Alexander Romero, Community, Edric, H.T, Sender, troig,
1
angular-material user3554664
2 md-button Edric
3 md-card Edric, Federico P
4 md-chips Edric

Angular Material

Uploaded by

Copyright:

Available Formats

Angular Material

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular Material

Uploaded by

Copyright:

Available Formats

angular-material

Chapter 1: Getting started with angular-material 2

Installing Angular Material 4

Getting Started (blank shell) 5

Setting up with the CDN 6

Creating an icon button 10

Basic card with header 13

Card with actions 13

Card with Avatar and image 14

Version Release Date

Installing Angular Material

bower install angular-material --save

jspm install angular-material

cdnjs | jsdelivr | googlecdn

Getting Started (blank shell)

in the index.html, link the CSS from Google CDN

angular.module('angularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])

angular.module('masterAngularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])

Note that importing from https://raw.githubusercontent.com will show this error:

Refused to execute script from 'https://raw.githubusercontent.com/angular/bower-

Read Getting started with angular-material online: https://riptutorial.com/angular-

angular.module('mdButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])

• It is also recommended to add an aria-label attribute to <md-button> for accessibility purpose

This example will be using Material Icons by Google.

angular.module('mdIconButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])

// Just initialize the app

Read md-button online: https://riptutorial.com/angular-material/topic/8691/md-button

Card with actions

Card with Avatar and image

Read md-card online: https://riptutorial.com/angular-material/topic/6571/md-card

This example uses <md-chips> and <md-chip>.

var app = angular.module('SomeApp', [/* Your dependencies here */ 'ngMaterial'])

(This content is only relavant for versions 1.1.2 and up)

Use the md-chip-append-delay attribute to set it (in milliseconds):

<md-chips md-chip-append-delay="500" ng-model="chipsModel" placeholder="Chips"></md-chips>

3 md-card Edric, Federico P

You might also like