Radio Box List

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

Getting Started

npm install ng2-radioboxlist --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 { RadioBoxList } from 'ng2-radioboxlist/radioboxlist.js';
@NgModule({
  declarations: [
    AppComponent,
    RadioBoxList
  ],
  ....

//app.component.ts file
 export class AppComponent {
  title = 'app';
  listItemToPass:any[] = [
    {id:1, color:"white"}, 
    {id:2, color:"red"}, 
    {id:3, color:"blue"},
    {id:4, color:"green"}
  ];
  checkboxStyles:string[] = ["container:greenClass, shadow", "title:whiteClass"];
  itemSelectedManager(event){
    console.log("selected item -> ", event);
  }
}

insert selector

<!-- app.component.html file -->
<radiobox-list 
               [title]="'choose a color'"
               [list]="listItemToPass" 
               [id] ="'id'"
               [value] = "'color'"
               [styles] = "checkboxStyles"
               [preselected]="'1'" //id to preselect as string
               (selected) = "itemSelectedManager($event)"
               ></radiobox-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

example of reading listSelected property

Theming

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

<!-- app.component.html file -->
<checkbox-list 
               [title]="'choose a color'"
               [list]="listItemToPass" 
               [id] ="'id'"
               [value] = "'color'"
               [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-radioboxlist/theme/radioboxlist.dark.css",
        "../node_modules/ng2-radioboxlist/theme/radioboxlist.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

Luigi Senzamici

[email protected]

License

This project is licensed under the MIT License

Release note

1.1.0 - bug fix on reading id setted 1.1.1 - adding input-struct and label-struct classes to default classes 1.1.2 - bug fix on styles 1.2.0 - adding preselected property 1.2.1/1.2.2 - bugfix on selection