Angular Custom Checkbox

This is a very simple library to create custom checkboxes with Angular 2+ projects.

PS: This library use pretty-checkbox to create the customs checkboxes.

Demo

http://rafaelferreira.info/angular-custom-checkbox/

Quick start

• Install with npm.

npm install angular-custom-checkbox --save

• Into your app.module.ts load the CustomCheckboxModule and add your imports.

import { CustomCheckboxModule } from 'angular-custom-checkbox';

Adding in your imports.

  imports: [
    ...
    CustomCheckboxModule,
    ...
  ],

Ok, your library is installed :) Let's go create the first checkbox.

Basic Configuration

TS

import { CustomCheckBoxModel } from 'angular-custom-checkbox';
...

export class AppExampleComponent implements OnInit  {  
  isSelected: boolean = false;
  jsonModel: CustomCheckBoxModel = new CustomCheckBoxModel();
}

HTML

<ngx-checkbox [configuration]="jsonModel" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>

PS: Use variable on ngModel as boolean.

Colors Available:

• p-primary
• p-success
• p-danger
• p-info
• p-warning

Advanced Configuration

this.jsonModel.color = 'p-success';
this.jsonModel.colorHex = '#F500FF';
this.jsonModel.rounded = true;
this.jsonModel.icon = 'mdi mdi-check';

Icons:

You can use some icons frameworks like Material Design Icons or Font-Awesome.

npm install mdi --save

OR

npm install font-awesome --save

Import the css files to your .angular-cli.json like:

"styles": [
  "styles.css",
  "../node_modules/mdi/css/materialdesignicons.min.css",
  "../node_modules/font-awesome/css/font-awesome.min.css"
],

And use for example:

this.jsonModel.icon = 'fa fa-check';