🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This is a very simple library to create custom checkboxes with Angular 2+ projects.This library use pretty-checkbox to create the customs checkboxes.

Forms Plugins

Documentation

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 May Also Like