nc

ng2-checkboxlist

Angular 2 checkbox list component with theming, no dependencys and customizable styles

Showing:

Popularity

Downloads/wk

2

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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

example of how it is rendered

Executing

example of reading listSelected property

data reading

Theming

it's also possible set a theme [dark or light] using input property theme:

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

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

Dark Theme screeshoot

Light Theme screenshoot

Light Theme screenshoot

Built With

Typescript

Stylus

Author

Luigi Senzamici

luigisenzamici@gmail.com

License

This project is licensed under the MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial