Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

angular-material

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-material

This repository is used only for Angular Material v1.x library deployments and localized installs using `npm` and `bower`. The actual component source-code for this library is in the [main Angular Material repository](https://github.com/angular/material).

1.1.0
Source
npm

Version published: 8 years ago

Weekly downloads: 44K; decreased by-5.49%

Maintainers: 1

Weekly downloads

Created: 10 years ago

Source

This repository is used only for Angular Material v1.x library deployments and localized installs using npm and bower. The actual component source-code for this library is in the main Angular Material repository.

Please file issues and pull requests against that angular/material repository only. Do not file issues here on the deployment repository.

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 Angular 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 Angular Material

You can install this package locally either with npm, jspm, or bower (deprecated).

Please note that Angular Material requires Angular 1.3.x or higher.

npm

# 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 a v1.1.0-rc2 version 
npm install http://github.com/angular/bower-material/tarball/v1.1.0-rc2 --save

# To view all installed package 
npm list;

jspm

# To install latest formal release
jspm install angular-material

# To install from HEAD of master
jspm install angular-material=github:angular/bower-material@master

# To view all installed package versions
jspm inspect

Now you can use require('angular-material') when installing with npm or jspm, or when using Browserify or Webpack.

bower

# To get the latest stable version, use bower from the command line.
bower install angular-material

# To get the most recent, last committed-to-master version use:
bower install 'angular-material#master'

# To save the bower settings for future use:
bower install angular-material --save

# Later, you can use easily update with:
bower update

Using the Angular Material Library

Now that you have installed the Angular libraries, simply 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/ and bower will install them under /bower_components/angular-material/.

npm

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/node_modules/angular-material/angular-material.css">
</head>
	<body ng-app="YourApp">

	<div ng-controller="YourController">

	</div>

	<script src="/node_modules/angular/angular.js"></script>
	<script src="/node_modules/angular-aria/angular-aria.js"></script>
	<script src="/node_modules/angular-animate/angular-animate.js"></script>
	<script src="/node_modules/angular-material/angular-material.js"></script>
	<script>

		// Include app dependency on ngMaterial

		angular.module( 'YourApp', [ 'ngMaterial' ] )
			.controller("YourController", YourController );

	</script>

</body>
</html>

bower

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
</head>
	<body ng-app="YourApp">

	<div ng-controller="YourController">

	</div>

	<script src="/bower_components/angular/angular.js"></script>
	<script src="/bower_components/angular-aria/angular-aria.js"></script>
	<script src="/bower_components/angular-animate/angular-animate.js"></script>
	<script src="/bower_components/angular-material/angular-material.js"></script>
	<script>

		// Include app dependency on ngMaterial

		angular.module( 'YourApp', [ 'ngMaterial' ] )
			.controller("YourController", YourController );

	</script>

</body>
</html>

Using the CDN

CDN versions of Angular Material are now available at Google Hosted Libraries.

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, Plunkr, or jsFiddle.

  <head>

    <!-- Angular Material CSS now available via Google CDN; version 0.9.4 used here -->
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">

  </head>
  <body>
  
    <!-- Angular Material Dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
    
    <!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
    
  </body>

Note that the above sample references the 0.9.4 CDN release. Your version will change based on the latest stable release version.

Unit Testing with Angular Material

If you are using Angular Material and will be using Jasmine to test your own custom application code, you will need to also load two (2) Angular mock files:

Angular Mocks - angular-mocks.js from /node_modules/angular-mocks/angular-mocks.js
Angular 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 own testing purposes:

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-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: ['PhantomJS,Chrome']

  });

};

1.1.0 (2016-08-14)

BREAKING CHANGE

The <md-select>'s, <md-option> component now acts more like the default <option> attribute of a standard HTML <select> by treating empty value and ng-value attributes as a special "reset" case that allows the input to return to the default state (i.e. the floating label returns to the placeholder position).

If you use the value or ng-value attributes with no value as follows and expect it to be a valid option,

<md-option value="">All options</md-option>

you will need to update your option to have a value like one of the following:

<md-option value="null">All options</md-option>
<md-option value="undefined">All options</md-option>
<md-option ng-value="''">All options</md-option>

Fixes #9718.

Features

aria: add provider to disable console warnings. (d63e4d0a, closes #3507, #8709)
autocomplete:
- expose position dropdown function to controller (07c488c5, closes #9085, #9180)
- add md-require-match validator. (74b62987, closes #2492, #8344)
card: add a class for overriding the image stretching (6e011b9a, closes #7447, #8183)
chips: add functionality to disable removing. (4304e884, closes #5796, #3820, #5799)
datePicker:
- Add a configuration option for the debounce interval. (7c6b823a, closes #8905, #8921)
- add ngFocus and ngBlur support (aaf682a1, closes #8779, #9182)
- add indicator that month headers are clickable (f61d53ec, closes #9128, #9142)
- allow users to specify the default calendar view (43e6bf19, closes #9111, #9113)
- is-open attribute, ability to hide icons, demo layout (562b76c5, closes #8481, #8743)
- add support for md-input-container (4c65fce5, closes #4233, #8083)
icon: observing mdFontIcon and mdFontSet attributes (5c2a06f3, closes #4961)
layouts: add @mixin for responsive support for rows (b6edf552, closes #9112, #9115)
list:
- support md-no-focus class (d04dfc5d, closes #8691, #8734)
- add support for md-menu as proxied element (5a0836c5, closes #3339, #6459)
panel: add RTL support (d127991c, closes #8974, #8990)
select: allow support for any font-size dropdown arrow font-size is now forced to 16px m (554e5a20, closes #8715)
sidenav: added onClose callback (1f01d264, closes #3179, #5974)
textarea: add the ability to trigger a resize manually (b9a57aac, closes #8376, #8657)
theme:
- add md-themes-disabled directive to disable themes (d500aad0)
- register custom theme styles (a0ca1393, closes #7708, #7864, #8641)
- support disabling of themes and layouts globally (ea43da3)
toast: added toastClass property (f72c7816, closes #2878, #8951)
util: add the ability to pass in a predicate function (c03db65c, closes #8644)

Breaking Changes

md-no-focus-style attribute on md-button is now a class (.md-no-focus)

Closes #8691. Closes #8734 (d04dfc5d)

Bug Fixes

build:
- switch to cssnano for CSS optimizations (9d525e56, closes #9225, #9236)
- -webkit- prefix for layouts (9c4165be, closes #8999, #9136)
docs:
- prevent docs from polluting the window (d9bd2660, closes #9190)
- toast documentation punctuation error (2c14d92b, closes #8870)
- codepen should link to correct license link (9ba1660d, closes #8846)
- should use unicode characters to avoid codepen's unescaping (6a7a1880, closes #8761, #9314)
refactor rtl-prop mixin to add less CSS (9a2c47de, closes #9217, #9218)
autocomplete:
- remove unnecessary execution (776a75ea, closes #9221)
- fix a couple of js errors and log a warning if the display value isn't a string (e85a115d, closes #9242, #9251)
- properly clean autocomplete specs (3a0f3235, closes #9195)
- clear search text if select item cleared. (dadbcf21, closes #8788, #9087)
- clear search text if select item cleared. (08eecbed, closes #8788, #9068)
- improve clear and blur behavior on escape (36f63a21, closes #8917, #8920)
- check select-on-match with cached results. (ae5eec48, closes #8836, #8853)
- autocompletes input should not clear the view value. (5d0d4980, closes #8947, #8977)
- list reappearing after tabbing away (4caf2201, closes #8748, #8800)
- initialize scope variable with empty string (3f0d686d, closes #8767, #8802)
backdrop:
- re-introduce resize handler, general cleanup (c4c7c338, closes #9249)
- define var in valid scope for all reference sites (fc536e92, closes #9226)
bottomsheet: gridlist has spacing issue within a list item. (87aa4cf0, closes #8914)
build:
- switch to cssnano for CSS optimizations (9d525e56, closes #9225, #9236)
- -webkit- prefix for layouts (9c4165be, closes #8999, #9136)
button: alignment between anchor buttons and normal buttons (af923e2f, closes #2440, #9183)
card:
- Image selector should only select immediate children or images within `md-card-h (75a86df8, closes #8785, #8786)
- image stretching on IE (d3816196, closes #8629, #8653)
checkbox:
- Undefined ng-checked value now shows as unchecked. (ebe2a878, closes #9280, #9281)
- avoid potential memory leaks, general cleanup (1a2b1a85, closes #7993, #9130)
- remove border bounce when transitioning checked state (b7415314, closes #8866, #8877)
chips:
- fallback to detect cursor position (0851736b, closes #9097, #9116)
- Fix static chips remove padding. (5c54632f, closes #8887, #8888)
- detect cursor position for selecting previous chip. (1814c12d, closes #8750, #8791)
colors:
- used destroy instead of $destroy (42833aa6, closes #8769, #8769)
- validate theme is a string (d6996b70, closes #8720, #8745)
- added support for empty values (b09b3175, closes #8122, #8737)
content: Reduce iOS flicker when scrolling. (4e2722cd, closes #7078, #8680)
css: ie-only fixes updated (cb59b088, closes #6304)
datepicker:
- add icon-button-margin to style (361d5413, closes #8736)
- prevent calendar from closing immediately on mobile with md-open-on-focus (2d8eb6de, closes #9170, #9202)
- calendar opening on window focus with mdOpenOnFocus (215dce96, closes #9186)
- add asterisk when required, more unit tests (73a40822, closes #8950, #9043)
- solve refocusing problems (0356bed2, closes #8960, #9080)
- align errors relative to the input inside a md-input-container (45b7db7b, closes #9057, #9077)
- respond to external error state changes (66065dbd, closes #8878, #9048)
- mark the input as invalid on submit, add missing import (2a051766, closes #8411, #9050)
- use accent and warn theme colors (bc44010c, closes #9006, #9056)
- wrong disabled dates, rendering issues (1b5f81c5, closes #8982, #8886, #8987)
- use the short days from the locale (68b71219, closes #8816, #8838)
- simplify the handleBodyClick handler (bb04bfaa, closes #8452, #8804)
- hidden calendar pane overflowing in IE (13734c0b, closes #8774)
- don't override global label size (e7d8d1d5, closes #8760, #8762)
- apply theming to the calendar pane (0fad106c, closes #8690, #8718)
- fix the docs and reorganize the directory (31bc95d9, closes #8722, #8725)
- icon alignment (c66c00f9, closes #8645)
dialog:
- register close listeners before animation (b875dc57, closes #9096, #9120)
- apply foreground color and automatically detect theme (e898d228, closes #8719, #8723)
gestures: detect touch action and provide polyfill. (d3cb371d, closes #7311, #7857)
icon:
- remove trustAs calls in favor of implicit trust conditions (#9250) (2ddeb915)
- implicity trust icon urls given during angular config phase (64bc5b90, closes #9203)
input:
- Add missing Polyfill for ng1.3 and fix tests. (1eb1037a, closes #9169)
- Fix message animation not running. (fa6213d3, closes #8635, #8864, #8973, #9044)
- don't throw for nested controls in input container (349c49d6, closes #9091, #9101)
- icons not inheriting theme colors (1775c722, closes #9058)
- add support for ng-value (16021b59, closes #8670, #8742)
- duplicate placeholders and data bindings aria-label (435088c0, closes #8251, #8377, #8291)
layout: improve responsive switches from layout column to row (93e2488a, closes #6528, #7327)
list:
- secondary container should not shrink in safari (f5bb5b07, closes #9235, #9238)
- only fill minimum required height. (8000c8e0, closes #8956, #9045)
- proxy elements should be not triggered by other controls (97e30d83, closes #7937, #8180)
- copy ng-show, ng-hide and ng-if to secondary item parent. (0d238dd3, closes #8794, #8796)
mdAria: apply aria-label to buttons correctly (563b232d, closes #8789, #8793)
navbar: clear the selected nav-item if it is null (83b7e663, closes #8703)
menu:
- remove padding from menu (28fe0fa1, closes #8196, #9059)
- clean up the backdrop if the menu got destroyed mid-animation (145ce63f, closes #8727, #8766)
- Fix icon/text alignment in Firefox. (ccae023c, closes #8464, #8675)
menu-item: properly compile when used with ng-repeat (bfad5e4d, closes #8697, #8852, #8850)
menuBar: menuBar should query for uncompiled md-button directives. (3654d724, closes #6802, #8242, #8709)
mixins: removed multilined comment (431994db, closes #9002)
panel:
- destroy the scope when the panelRef is destroyed (9ce2862e, closes #8845, #8848)
- Propagation, CSS targeting, and dynamic position updating (4efafcfb, closes #8968, #8980, #8983)
- fix error when opening a previously closed panel (f85ac4bf, closes #8894, #8895)
progress-circular: wrapper not expanding layout (ff100188, closes #9031, #9033)
progress-linear: stop the CSS animations when the element is disabled (f3369ebb, closes #8764, #8776)
radio: ng-disabled on radio-group should notify child radio buttons. (9d6e3386, closes #8939, #8942)
release: version parser is fixed for rc.# syntax (8568ceea)
ripple: fix ripple artifacts in Chrome v51 (15da974d, closes #8824)
select:
- Alter dropdown icon to conform to spec. (9fa6a97a, closes #9290)
- Allow 0 as default value. (e435e092, closes #9232, #9237)
- handle input from number pad (11cbe3a2, closes #9104, #9106)
- Failing tests on Angular 1.6 (snapshot). (d897b830, closes #9012)
- Fix empty option stlying issue. (fcd42df8, closes #6851, #8907)
- ngModel validator should use option hashkeys. (87584881, closes #8666, #8763)
- Fix pristine/dirty error, scope conflict, and many styles. (024e9798, closes #8529, #7988, #8527, #8672)
- remove checkbox container for label element (53175ad1, closes #8726, #8729)
- remove some unnecessary logic (85785e4e, closes #8735)
- Disallow keyboard selection of disabled options. (d5ac3bb8, closes #8626, #8681)
- don't mutate the form data (3c7f24d5, closes #8581, #8651)
showHide: don't call getComputedStyle on comment node (f969ae52, closes #9243, #9244)
site: Fix navigation toggle to properly open on page refresh. (ec2726e0, closes #8841, #8842)
slider-rtl: added rtl support for slider (302f9dc3, closes #7434)
subheader:
- do not compile ng-repeat twice. (09e2eb61, closes #8647, #9187)
- fix ng-show/hide directive on subheader (0315713e, closes #8604, #8648)
switch: fix switch drag functionality. (911ec721, closes #4719, #2338, #6715)
tabs: properly detect text changes (121a39d5, closes #8667, #8803)
textarea:
- properly preserve the padding after measuring the line height (1fe38576, closes #8782, #8790)
- take scroll distance into account when setting the height (fbd7d9d3, closes #8632, #8643)
theming: potentially generating invalid CSS (aea54376, closes #8953)
toast: apply theming correctly to custom toasts (995dc496, closes #8777, #8799)
toolbar:
- use variables for height. (9ccf611d, closes #8941, #8943)
- transitions applied too soon before css loaded (1b33a1a8, closes #7986, #8738)
tooltip:
- prevent element occasionally animating in from the top (46662d36, closes #8818, #9117)
- properly handle tapping away (ddc9e8d6, closes #8744)
- fix regression on touch devices with a mouse (c8821eb0, closes #8710, #8730)
- improve the behavior on touch devices (15402f85, closes #8642, #8700)
virtual-repeat:
- add -webkit-overflow-scrolling (b25eaf0a, closes #5322, #9163)
- preserve scroll offset when the watched array reduces in length (f9a84d2a, closes #8129)

Contributors

Thanks to the great contributors who helped with this release (after the rc.5 release):

<img alt="topherfangio" src="https://avatars.githubusercontent.com/u/54370?v=3&s=117" width="117"> |<img alt="x87" src="https://avatars.githubusercontent.com/u/5698288?v=3&s=117" width="117"> | :---: |:---: | topherfangio |x87 |

Keywords

FAQs

What is angular-material?

Is angular-material popular?

Is angular-material well maintained?

Package last updated on 17 Aug 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

angular-material

Layouts and SCSS

Installing Angular Material

npm

jspm

bower

Using the Angular Material Library

npm

bower

Using the CDN

Unit Testing with Angular Material

1.1.0 (2016-08-14)

Features

Breaking Changes

Bug Fixes

Contributors

Keywords

Related posts

Supply Chain Attack on Rspack npm Packages Injects Cryptojacking Malware

Skuld Infostealer Returns to npm with Fake Windows Utilities and Malicious Solara Development Packages