ng2-checkboxlist

Check Box List

Angular 2 checkbox list component

Getting Started

npm install ng2-checkboxlist --save

Simple Use

import

//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

<!-- app.component.html file -->
<checkbox-list 
               [title]="'choose a number'"
               [list]="listItemToPass" 
               [id] ="'id'"
               [value] = "'text'"
               [styles] = "checkboxStyles"
               (listSelected) = "itemSelectedManager($event)"
               ></checkbox-list>

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

![Executing]https://github.com/LuigiSenzamici/ng2-checkboxlist/blob/master/docs/img/checkboxlist-scr.PNG ![data reading]https://github.com/LuigiSenzamici/ng2-checkboxlist/blob/master/docs/img/checkboxlist-result.PNG

Built With

Typescript

Stylus

Author

Luigi Senzamici

License

This project is licensed under the MIT License