# AngularJS Material **[Support for legacy AngularJS ended on January 1st, 2022](https://goo.gle/angularjs-end-of-life). [See `@angular/core` for the actively supported Angular](https://npmjs.com/@angular/core).** See the following, related, actively supported Angular packages: - [`@angular/material`](https://www.npmjs.com/package/@angular/material) - [`@angular/cdk`](https://www.npmjs.com/package/@angular/cdk) This repository was used to publish the AngularJS Material v1.x library and localized installs using `npm`. You can find the component source-code for this library in the [AngularJS Material repository](https://github.com/angular/material). This package and related repositories have reached End-of-Life. AngularJS Material is an implementation of Google's [Material Design Specification (2014-2017)](https://material.io/archive/guidelines/material-design/) for [AngularJS](https://angularjs.org) (v1.x) developers. For an implementation of the [Material Design Specification (2018+)](https://material.io/design/), please see the [Angular Material](https://material.angular.io/) project which is built for [Angular](https://angular.io) (v2+) developers. ## Layouts and SCSS Included in this repository are the: * **[SCSS files](https://github.com/angular/bower-material/tree/master/modules/scss)** which are used to build the *.css files * **[Layout files](https://github.com/angular/bower-material/tree/master/modules/layouts)** which are used with the AngularJS Material (Flexbox) Layout API. > Note these are already included in the `angular-material.css` files. These copies are for direct developer access and contain IE flexbox fixes; as needed. ## Installing AngularJS Material You can install this package locally with `npm`. **Please note**: AngularJS Material requires **AngularJS 1.7.2** to **AngularJS 1.8.x**. ```shell # To install latest formal release npm install angular-material # To install latest release and update package.json npm install angular-material --save # To install from HEAD of master npm install http://github.com/angular/bower-material/tarball/master # or use alternate syntax to install HEAD from master npm install http://github.com/angular/bower-material#master --save # note: ^^ creates the following package.json dependency # "angular-material": "git+ssh://git@github.com/angular/bower-material.git#master" # To install the v1.2.1 version npm install http://github.com/angular/bower-material/tarball/v1.2.1 --save # To view all installed package npm list ``` ## Using the AngularJS Material Library You have installed the AngularJS library, next include the scripts and stylesheet in your main HTML file, in the order shown in the example below. Note that NPM will install the files under `/node_modules/angular-material/`. ```html

``` ## Using the CDN With the Google CDN, you will not need to download local copies of the distribution files. Instead, reference the CDN URLs to use those remote library files. This is especially useful when using online tools such as CodePen, Plunker, or jsFiddle. ```html ``` > Note that the above sample references the 1.2.1 CDN release. Your version will change based on the latest stable release version. ## Unit Testing with Angular Material
If you are using AngularJS Material and will be using Jasmine to test your custom application code, you will need to also load two (2) AngularJS mock files: * AngularJS mocks * **angular-mocks.js** from `/node_modules/angular-mocks/angular-mocks.js` * AngularJS Material mocks * **angular-material-mocks.js** from `/node_modules/angular-material/angular-material-mocks.js`
Shown below is a karma-configuration file (`karma.conf.js`) sample that may be a useful template for your testing purposes:

```js module.exports = function(config) { var SRC = [ 'src/myApp/**/*.js', 'test/myApp/**/*.spec.js' ]; var LIBS = [ 'node_modules/angular/angular.js', 'node_modules/angular-animate/angular-animate.js', 'node_modules/angular-aria/angular-aria.js', 'node_modules/angular-messages/angular-messages.js', 'node_modules/angular-material/angular-material.js', 'node_modules/angular-mocks/angular-mocks.js', 'node_modules/angular-material/angular-material-mocks.js' ]; config.set({ basePath: __dirname + '/..', frameworks: ['jasmine'], files: LIBS.concat(SRC), port: 9876, reporters: ['progress'], colors: true, autoWatch: false, singleRun: true, browsers: ['Chrome'] }); }; ```

	Stars	Issues	Version	Updated	Created
@angular/material	24,100	2,043	17.3.9	2 days ago	8 years ago
angular-material	16,573	278	1.2.5	2 years ago	9 years ago
ng2-bootstrap	5,514	584	1.6.3	7 years ago	9 years ago
taiga-ui	3,052	135	3.79.0	13 hours ago	3 years ago
tailwindcss			3.4.3	2 months ago	7 years ago

@angular/material vs angular-material vs ng2-bootstrap vs taiga-ui vs tailwindcss

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past