Skip to content
This is a very simple library to create custom checkboxes with Angular 2+ projects.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
e2e
projects/custom-checkbox
src
.angular-cli.json
.editorconfig
.gitignore
README.md
angular.json
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

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';
You can’t perform that action at this time.