Material Design for AngularJS Apps

Material design for AngularJS
Under MIT License
By angular

javascript angularjs material-design angularjs-material lts

Material Design for AngularJS Apps

Material Design is a specification for a
unified system of visual, motion, and interaction design that adapts across different devices. Our
goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the
material design specification for use in AngularJS single-page applications (SPAs).

AngularJS Material is an implementation of Google's
Material Design Specification (2014-2017)
for AngularJS (v1.x) developers.

For an implementation of the Material Design Specification (2018+),
please see the Angular Material project which is built for
Angular (v2+) developers.

Long Term Support

AngularJS Material has entered a Long Term Support (LTS) period which ends on December 31st, 2021.
This date aligns with the
AngularJS LTS period.

We now focus exclusively on providing fixes to bugs, in the 1.2.x branch of the library, that
satisfy at least one of the following criteria:
- We receive a report of, or detect, a security weakness which is then verified
- A major browser releases a version that will cause current production applications
to stop working
- The jQuery library releases a version that will cause
current production applications to stop working

AngularJS Material 1.1.x will get a new version, if and only if, we verify a new severe security

Learn how to report security issues

AngularJS Material includes a rich set of reusable, well-tested, and accessible UI components.

Quick Links:

Please note that using the latest version of AngularJS Material requires the use of
AngularJS 1.7.2 or higher.

AngularJS Material supports the browser versions defined in the browserslist field
of our package.json. Find out more on our
docs site.

AngularJS Material supports the screen reader versions listed

Online Documentation and Demos

Our Release Processes

To preserve stability with applications currently using AngularJS Material, we do not follow semver.
We have three types of releases:

Patch Releases

The patch builds (1.2.1, 1.2.2, etc.) are prepared based on commits in the master branch;
which contains only non-breaking changes (I.e. bug fixes, new features, API additions, and minimal
non-breaking CSS changes). We are targeting patch releases every 2 weeks.

Minor Releases

The minor builds (1.1.0, 1.2.0, 1.3.0) can contain breaking changes to CSS, APIs, and UX.
Our formal release of minor builds is much less frequent. The release process for minor builds is currently
being re-evaluated.

For the purposes of AngularJS Material, you could think of the patch releases as being minor changes,
and the 'minor' releases as being major changes according to semver.


Developers interested in contributing should read the following guidelines:

Please do not ask general questions in an issue. Issues are only to report bugs, request
enhancements, or request new features. For general questions and discussions, use the
AngularJS Material Forum.

It is important to note that for each release, the ChangeLog is a resource that will
itemize all:


Developers can build AngularJS Material using NPM and gulp.

First install or update your local project's npm dependencies:

npm install

Install Gulp v3 globally:

npm install -g [email protected]

Then run the gulp tasks:


To build angular-material.js/.css and Theme files in the /dist directory

gulp build

To build the AngularJS Material Docs and Demos in /dist/docs directory

gulp docs

For development, use the docs:watch NPM script to run in dev mode:


To build the AngularJS Material Source, Docs, and Demos in watch mode

npm run docs:watch

For more details on how the build process works and additional commands (available for testing and
debugging) developers should read the Build Guide.

Installing Build (Distribution Files)

For developers not interested in building the AngularJS Material library... use NPM to install
and use the AngularJS Material distribution files.

Change to your project's root directory.


To get the latest stable version, use NPM from the command line.

npm install angular-material --save

To get the most recent, latest committed-to-master version use:

npm install --save

Other Dependency Managers

Visit our distribution repository
for more details on how to install and use the AngularJS Material distribution files within your local


CDN versions of AngularJS Material are available.

With the Google CDN, you will not need to download local copies of the distribution files. Instead,
simply reference the CDN urls to easily use those remote library files. This is especially useful
when using online tools such as CodePen or Plunker.


<!-- AngularJS Material CSS now available via Google CDN; version 1.2.1 used here -->


Developers seeking the latest, most-current build versions can use to
pull directly from our distribution repository:


<!-- AngularJS Material CSS using GitCDN to load directly from `bower-material/master` -->
<link rel="stylesheet" href="">


Once you have all the necessary assets installed, add ngMaterial and ngMessages as dependencies for your

angular.module('myApp', ['ngMaterial', 'ngMessages']);