Angular 2 checkbox list component with theming, no dependencys and customizable styles
npm install ng2-checkboxlistbash
npm install ng2-checkboxlist --save
`
Checking before using
this component assume that run under Angular2 application, so has this implicit dependency:
`javascript
"@angular/common": "^4.4.0-RC.0",
"@angular/core": "4.4.0-RC.0",
"rxjs": "5.4.3"
`
Simple Use
import
`javascript
//app.module.ts file
....
import { CheckBoxList } from 'ng2-checkboxlist/checkboxlist.js';
@NgModule({
declarations: [
AppComponent,
CheckBoxList
],
....
//app.component.ts file
export class AppComponent {
title = 'app';
listItemToPass:any[] = [
{id:1, text:"one"},
{id:2, text:"two"},
{id:3, text:"three"},
{id:4, text:"four"}
];
checkboxStyles:string[] = ["container:greenClass, shadow", "title:whiteClass"];
itemSelectedManager(event){
console.log("selected items list -> ", event);
}
}
`
insert selector
`html
[list]="listItemToPass"
[id] ="'id'"
[value] = "'text'"
[styles] = "checkboxStyles"
(listSelected) = "itemSelectedManager($event)"
>
`
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: ":, , ..., "
Array format simply is an array of these strings.
in code sample 'checkboxStyles' is so declared:
`javascript
checkboxStyles:string[] = ["container:greenClass, shadow", "title:whiteClass"];
`
Screenshots
$3
!Executing
$3
!data reading
Theming
it's also possible set a theme [dark or light] using input property theme:
`html
[list]="listItemToPass"
[id] ="'id'"
[value] = "'text'"
[theme] = "'dark'"
(listSelected) = "itemSelectedManager($event)"
>
`
For using css file theme you have to set styles property in .angular-cli.json like so:
`javascript
"styles": [
"styles.css",
"../node_modules/ng2-checkboxlist/theme/checkboxlist.dark.css",
"../node_modules/ng2-checkboxlist/theme/checkboxlist.light.css"
],
``