Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
e2e
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Angular Custom Checkbox

NPM

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';