npmpackage.info

angular-material

Material design for AngularJS

1.2.5

16,524

MIT

JavaScript

108.50 kB

17,921,257 4.6

Installations

npm install angular-material

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.22.12

NPM Version

6.14.16 Score

99.1

Supply Chain

100

Quality

75.2

Maintenance

Vulnerability

100

License

Pull Requests

Open

9

Total

3,084

Closed

2,153

Merged

922

Issues

Open

269

Total

9,009

Closed

8,740

Releases

v1.2.5

Published on 12 Apr 2022

v1.2.4

Published on 01 Jan 2022

v1.2.3

Published on 15 Jul 2021

v1.2.2

Published on 21 Dec 2020

1.2.1

v1.2.1

Published on 24 Sept 2020

1.1.26

v1.1.26

Published on 06 Sept 2020

View all 16 releases

Contributors

395

Unable to fetch Contributors

View all 395 contributors

Languages

JavaScript

SCSS

HTML

CSS

Shell

BitBake

JavaScript (83.71%)

SCSS (7.69%)

HTML (7.18%)

CSS (0.83%)

Shell (0.37%)

BitBake (0.22%)

Developer

angular

Download Statistics

Total Downloads

17,921,257

Last Day

8,876

Last Week

40,677

Last Month

194,207

Last Year

2,557,342

GitHub Statistics

16,524 Stars

4,950 Commits

3,379 Forks

707 Watching

53 Branches

395 Contributors

Bundle Size

418.73 kB

Minified

108.50 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.2.5

Package Id

angular-material@1.2.5

Unpacked Size

10.80 MB

Size

1.74 MB

File Count

540

NPM Version

6.14.16

Node Version

12.22.12

Total Downloads

Cumulative downloads

Total Downloads

17,921,257

Last day

-9.9%

8,876

Compared to previous day

Last week

-18.7%

40,677

Compared to previous week

Last month

11.1%

194,207

Compared to previous month

Last year

12.8%

2,557,342

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

angular angular-animate angular-aria angular-messages

Versions

AngularJS Material

Support for legacy AngularJS ended on January 1st, 2022. See @angular/core for the actively supported Angular.

See the following, related, actively supported Angular packages:

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. This package and related repositories have reached End-of-Life.

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.

Layouts and SCSS

Included in this repository are the:

SCSS files which are used to build the *.css files
Layout files 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.

1# To install latest formal release 
2npm install angular-material
3
4# To install latest release and update package.json
5npm install angular-material --save
6
7# To install from HEAD of master
8npm install http://github.com/angular/bower-material/tarball/master
9
10# or use alternate syntax to install HEAD from master
11npm install http://github.com/angular/bower-material#master --save
12# note: ^^ creates the following package.json dependency
13#      "angular-material": "git+ssh://git@github.com/angular/bower-material.git#master"
14
15
16# To install the v1.2.1 version 
17npm install http://github.com/angular/bower-material/tarball/v1.2.1 --save
18
19# To view all installed package 
20npm 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/.

1<!DOCTYPE html>
2<html>
3<head>
4  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
5  <link rel="stylesheet" href="/node_modules/angular-material/angular-material.css">
6</head>
7  <body ng-app="YourApp">
8  <div ng-controller="YourController">
9
10  </div>
11
12  <script src="/node_modules/angular/angular.js"></script>
13  <script src="/node_modules/angular-aria/angular-aria.js"></script>
14  <script src="/node_modules/angular-animate/angular-animate.js"></script>
15  <script src="/node_modules/angular-messages/angular-messages.js"></script>
16  <script src="/node_modules/angular-material/angular-material.js"></script>
17  <script>
18    // Include app dependency on ngMaterial
19    angular.module('YourApp', ['ngMaterial', 'ngMessages'])
20      .controller("YourController", YourController);
21  </script>
22</body>
23</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.

1<head>
2    <!-- Angular Material CSS now available via Google CDN; version 1.2.1 used here -->
3    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css">
4</head>
5<body>
6
7    <!-- Angular Material Dependencies -->
8    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
9    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js"></script>
10    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js"></script>
11    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js"></script>
12    
13    <!-- Angular Material Javascript now available via Google CDN; version 1.2.1 used here -->
14    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js"></script>
15</body>

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:

1module.exports = function(config) {
2
3  var SRC = [
4    'src/myApp/**/*.js',
5    'test/myApp/**/*.spec.js'
6  ];
7
8  var LIBS = [
9    'node_modules/angular/angular.js',
10    'node_modules/angular-animate/angular-animate.js',
11    'node_modules/angular-aria/angular-aria.js',
12    'node_modules/angular-messages/angular-messages.js',
13    'node_modules/angular-material/angular-material.js',
14    
15    'node_modules/angular-mocks/angular-mocks.js',
16    'node_modules/angular-material/angular-material-mocks.js'
17  ];
18
19  config.set({
20    basePath: __dirname + '/..',
21    frameworks: ['jasmine'],
22    
23    files: LIBS.concat(SRC),
24
25    port: 9876,
26    reporters: ['progress'],
27    colors: true,
28
29    autoWatch: false,
30    singleRun: true,
31    browsers: ['Chrome']
32  });
33};

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Security-Policy

Determines if the project has published a security policy.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

8

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

7

SAST

Determines if the project uses static code analysis.

3

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

57 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-2qqx-w9hr-q5gx
Warn: Project is vulnerable to: GHSA-2vrf-hf26-jrp5
Warn: Project is vulnerable to: GHSA-4w4v-5hc9-xrr2
Warn: Project is vulnerable to: GHSA-m2h2-264f-f486
Warn: Project is vulnerable to: GHSA-m9gf-397r-hwpg
Warn: Project is vulnerable to: GHSA-mqm9-c95h-x2p6
Warn: Project is vulnerable to: GHSA-prc3-vjfx-vhm9
Warn: Project is vulnerable to: GHSA-qwqh-hm9m-p5hr
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-q9mw-68c2-j6m5
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-7px7-7xjx-hxm8
Warn: Project is vulnerable to: GHSA-x5pg-88wf-qq4p
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-x77j-w7wf-fjmw
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-rv73-9c8w-jp4c
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

4.6

/10

Last Scanned on 2025-02-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to angular-material

@angular/material

19.1.3

Angular Material

@angular/material-moment-adapter

19.1.3

Angular Material Moment Adapter

@angular/cdk

19.1.3

Angular Material Component Development Kit

@angular-material-components/datetime-picker

16.0.1

Angular Material Datetime Picker