🚀. Socket Launch Week Day 3:Socket Firewall Now Blocks Malicious VS Code and Open VSX Extensions.Learn more
Sign In

@angular2-material/checkbox

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@angular2-material/checkbox - npm Package Compare versions

Comparing version
2.0.0-alpha.8-2
to
2.0.0-alpha.8-3
+77
-14
package.json
{
"name": "@angular2-material/checkbox",
"version": "2.0.0-alpha.8-2",
"_args": [
[
{
"raw": "@angular2-material/checkbox",
"scope": "@angular2-material",
"escapedName": "@angular2-material%2fcheckbox",
"name": "@angular2-material/checkbox",
"rawSpec": "",
"spec": "latest",
"type": "tag"
},
"/private/tmp/old-packages"
]
],
"_from": "@angular2-material/checkbox@latest",
"_id": "@angular2-material/checkbox@2.0.0-alpha.8-3",
"_inCache": true,
"_installable": true,
"_location": "/@angular2-material/checkbox",
"_nodeVersion": "5.7.0",
"_npmOperationalInternal": {
"host": "packages-16-east.internal.npmjs.com",
"tmp": "tmp/checkbox-2.0.0-alpha.8-3.tgz_1473988779585_0.38027149671688676"
},
"_npmUser": {
"name": "angular2-material",
"email": "angular-core+npm@google.com"
},
"_npmVersion": "3.7.5",
"_phantomChildren": {},
"_requested": {
"raw": "@angular2-material/checkbox",
"scope": "@angular2-material",
"escapedName": "@angular2-material%2fcheckbox",
"name": "@angular2-material/checkbox",
"rawSpec": "",
"spec": "latest",
"type": "tag"
},
"_requiredBy": [
"#USER"
],
"_resolved": "https://registry.npmjs.org/@angular2-material/checkbox/-/checkbox-2.0.0-alpha.8-3.tgz",
"_shasum": "1eb6c44fccaa1d073f0582239019b62fc6804679",
"_shrinkwrap": null,
"_spec": "@angular2-material/checkbox",
"_where": "/private/tmp/old-packages",
"bugs": {
"url": "https://github.com/angular/material2/issues"
},
"dependencies": {},
"description": "Angular 2 Material checkbox",
"main": "./checkbox.umd.js",
"module": "./index.js",
"typings": "./index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/angular/material2.git"
"devDependencies": {},
"directories": {},
"dist": {
"shasum": "1eb6c44fccaa1d073f0582239019b62fc6804679",
"tarball": "https://registry.npmjs.org/@angular2-material/checkbox/-/checkbox-2.0.0-alpha.8-3.tgz"
},
"homepage": "https://github.com/angular/material2#readme",
"keywords": [

@@ -20,10 +69,24 @@ "angular",

"license": "MIT",
"bugs": {
"url": "https://github.com/angular/material2/issues"
},
"homepage": "https://github.com/angular/material2#readme",
"main": "./checkbox.umd.js",
"maintainers": [
{
"name": "angular2-material",
"email": "angular-core+npm@google.com"
}
],
"module": "./index.js",
"name": "@angular2-material/checkbox",
"optionalDependencies": {},
"peerDependencies": {
"@angular2-material/core": "2.0.0-alpha.8-2",
"@angular2-material/core": "2.0.0-alpha.8-3",
"@angular/forms": "^2.0.0"
}
},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/angular/material2.git"
},
"scripts": {},
"typings": "./index.d.ts",
"version": "2.0.0-alpha.8-3"
}
+5
-79

@@ -1,79 +0,5 @@

# md-checkbox
`md-checkbox` is a Material Design selection control that allows users to make a binary choice for
a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves
in the same way. Similar to the native checkbox element, it supports an indeterminate state for
"mixed" checkboxes.
A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhDy?p=preview.
## Usage
### Basic Usage
`md-checkbox` can be used anywhere a normal checkbox would be used, and in the same way.
```html
<ul>
<li *ngFor="let todo of todos">
<md-checkbox [checked]="todo.completed"
(change)="todo.completed = $event">
{{todo.name}}
</md-checkbox>
</li>
</ul>
```
### Usage within Forms
In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]`
for use within forms.
```html
<form (submit)="saveUser()">
<!-- Form fields... -->
<div>
<md-checkbox [(ngModel)]="user.agreesToTOS">
I have read and agree to the terms of service.
</md-checkbox>
</div>
<button type="submit" [disabled]="!user.agreesToTOS">Sign Up</button>
</form>
```
### Indeterminate Checkboxes
Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state
```html
<md-checkbox [checked]="false"
[indeterminate]="isIndeterminate"
(change)="isIndeterminate = false">
Click the Button Below to Make Me Indeterminate.
</md-checkbox>
<button type="button" (click)="isIndeterminate = true">
Make Indeterminate
</button>
```
### Alignment
Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label.
```html
<md-checkbox [checked]="true" align="end">
I come after my label.
</md-checkbox>
```
Note that this alignment is preserved within RTL layouts.
### Accessibility
By default, `md-checkbox` provides all the accessibility attributes needed. It also supports
keyboard navigation and toggling via the spacebar. However, you can provide an `aria-label` to the
checkbox if you do not wish to have any label text.
```html
<md-checkbox [checked]="false" aria-label="My standalone checkbox"></md-checkbox>
```
This package was used early in the pre-release development cycle of Angular Material v2, but has no
longer been used since September of 2016. Development of Angular Material now occurs under scoped
npm package @angular/material. Visit https://material.angular.io for the latest information and
instructions for using Angular Material or check out the latest source code
from https://github.com/angular/material2.