Material Designis 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 Materialis an implementation of Google's Material Design Specification (2014-2017) forAngularJS(v1.x) developers.
For an implementation of theMaterial Design Specification (2018+), please see theAngular Materialproject which is built for Angular(v2+) developers.
AngularJS Material support has officially ended as of January 2022. See what ending support means andread the end of life announcement.Visit material.angular.iofor the actively supported Angular Material.
Find details on reporting security issues here.
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 AngularJS1.7.2or higher.
AngularJS Material supports the browser versions defined in thebrowserslistfield
of ourpackage.json.Find out more on our
docs site.
AngularJS Material supports the screen reader versions listed here.
- Visitmaterial.angularjs.orgonline to review the API, see the components in action via live demos, and to read our detailed guides which include the layout system, theming system, typography, and more.
- Or you can build the documentation and demos locally; see Build Docs & Demosfor details.
Developers can build AngularJS Material using NPM and gulp.
First install or update your local project'snpmdependencies:
npm installInstall Gulp v3 globally:
npm install -g gulp@3Then run thegulptasks:
#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 docsFor development, use thedocs:watchNPMscript to run in dev mode:
#To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watchFor more details on how the build process works and additional commands (available for testing and debugging) developers should read theBuild Guide.
For developers not interested in building the AngularJS Material library... useNPMto 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 http://github /angular/bower-material#master --saveVisit ourdistribution repository for more details on how to install and use the AngularJS Material distribution files within your local project.
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 asCodePenorPlunker.
<head>
<!-- AngularJS Material CSS now available via Google CDN; version 1.2.1 used here -->
<linkrel= "stylesheet"href= "https://ajax.googleapis /ajax/libs/angular_material/1.2.1/angular-material.min.css">
</head>
<body>
<!-- AngularJS Material Dependencies -->
<scriptsrc= "https://ajax.googleapis /ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<scriptsrc= "https://ajax.googleapis /ajax/libs/angularjs/1.8.2/angular-animate.min.js"></script>
<scriptsrc= "https://ajax.googleapis /ajax/libs/angularjs/1.8.2/angular-aria.min.js"></script>
<scriptsrc= "https://ajax.googleapis /ajax/libs/angularjs/1.8.2/angular-messages.min.js"></script>
<!-- AngularJS Material Javascript now available via Google CDN; version 1.2.1 used here -->
<scriptsrc= "https://ajax.googleapis /ajax/libs/angular_material/1.2.1/angular-material.min.js"></script>
</body>Developers seeking the latest, most-current build versions can useGitCDN.xyzto pull directly from ourdistribution repository:
<head>
<!-- AngularJS Material CSS using GitCDN to load directly from `bower-material/master` -->
<linkrel= "stylesheet"href= "https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css">
</head>
<body>
<!-- AngularJS Material Dependencies -->
<scriptsrc= "https://ajax.googleapis /ajax/libs/angularjs/1.8.2/angular.js"></script>
<scriptsrc= "https://ajax.googleapis /ajax/libs/angularjs/1.8.2/angular-animate.js"></script>
<scriptsrc= "https://ajax.googleapis /ajax/libs/angularjs/1.8.2/angular-aria.js"></script>
<scriptsrc= "https://ajax.googleapis /ajax/libs/angularjs/1.8.2/angular-messages.min.js"></script>
<!-- AngularJS Material Javascript using GitCDN to load directly from `bower-material/master` -->
<scriptsrc= "https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js"></script>
</body>Once you have all the necessary assets installed, addngMaterialandngMessagesas dependencies for your
app:
angular.module('myApp',['ngMaterial','ngMessages']);
