Check Box List
Angular 2 checkbox list component with theming, no dependencys and customizable styles
Getting Started
npm install ng2-checkboxlist --save
Checking before using
this component assume that run under Angular2 application, so has this implicit dependency:
"@angular/common": "^4.4.0-RC.0" "@angular/core": "4.4.0-RC.0" "rxjs": "5.4.3"
Simple Use
import
//app.module.ts file...;@
insert selector
<!-- app.component.html file -->
Styling
you can style by applying class to container, title, input and label passing a string or an array of string to [styles] input property. String format is: "<container|title|input|label>:, , ..., " Array format simply is an array of these strings. in code sample 'checkboxStyles' is so declared:
checkboxStyles:string = "container:greenClass, shadow" "title:whiteClass";
Screenshots
example of how it is rendered
example of reading listSelected property
Theming
it's also possible set a theme [dark or light] using input property theme:
<!-- app.component.html file -->
For using css file theme you have to set styles property in .angular-cli.json like so:
"styles": "styles.css" "../node_modules/ng2-checkboxlist/theme/checkboxlist.dark.css" "../node_modules/ng2-checkboxlist/theme/checkboxlist.light.css"
[IMPORTANT] if you are under ng serve command you have to stop and repeat command (.angular-cli.json isn't watch by angular compiler)
Dark Theme screeshoot
Light Theme screenshoot
Built With
Typescript
Stylus
Author
luigisenzamici@gmail.com
License
This project is licensed under the MIT License