https://llafuente.github.io/ng2-vs-checklist/demo/
Store multiple checkbox values into a single model (array).
Inspiration/port of: https://github.com/vitalets/checklist-model
Comes into two flavours.
Example Markup
<h1>TODO list</h1>
<label>
<input type="checkbox" checklist="modelVar" value="Write a book" />
Write a book
</label><br />
<label>
<input type="checkbox" checklist="modelVar" value="Plant a tree" />
Plant a tree
</label><br />
<label>
<input type="checkbox" checklist="modelVar" value="Have a baby" />
Have a baby
</label><br />
<pre>modelVar: {{modelVar | json}}</pre>
```html
Output all checkbox marked
> modelVar: ['Write a book', 'Plant a tree', 'Have a baby']
## Tree (use bootstrap css)
Display checkboxes as a tree.
Metadata example:
```ts
@Component({
//...
})
export class XXX {
treeModel: string[];
constructor() {
this.treeData = [{
id: null,
selectChildren: true, // when click on Europe will check everything below
label: 'Europa',
children: [{
id: 'es',
label: 'Spain'
}, {
id: 'fr',
label: 'France'
}, {
id: 'it',
label: 'Italy'
}]
}, /*...*/];
}
}Markup example:
<checktree [nodes]="treeData" [model]="treeModel"></checktree>Install through npm:
npm install --save ng2-vs-checklist
Then use it in your app like so:
import {VSChecklistModule} from 'ng2-vs-checklist';
@NgModule({
//...
imports: [
VSChecklistModule
]
//...
})You may also find it useful to view the demo source.
<script src="node_modules/dist/umd/ng2-vs-checklist/ng2-vs-checklist.js"></script>
<script>
// everything is exported vsChecklist namespace
</script>
https://llafuente.github.io/ng2-vs-checklist/docs/
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm installwhile current directory is this repo
Run npm start to start a development server on port 8000 with auto reload + tests.
Run npm test to run tests once or npm run test:watch to continually run tests.
- Bump the version in package.json (once the module hits 1.0 this will become automatic)
npm run releaseMIT