node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »


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


//app.module.ts file
import { RadioBoxList } from 'ng2-radioboxlist/radioboxlist.js';
  declarations: [
//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"];
    console.log("selected item -> ", event);

insert selector

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


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"];


example of how it is rendered


example of reading listSelected property

data reading


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

<!-- app.component.html file -->
               [title]="'choose a color'"
               [id] ="'id'"
               [value] = "'color'"
               [theme] = "'dark'" 
               (listSelected) = "itemSelectedManager($event)"

For using css file theme you have to set styles property in .angular-cli.json like so:

      "styles": [

[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




Luigi Senzamici


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