Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ng2-checkboxlistpublic

    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

    install

    npm i ng2-checkboxlist

    Downloadsweekly downloads

    19

    version

    1.1.1

    license

    MIT

    last publish

    collaborators

    • avatar