angular-custom-checkbox's Introduction

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

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

angular-custom-checkbox's People

Contributors

Stargazers

Watchers

angular-custom-checkbox's Issues

A typescript question

Hello,

I've come across your package looking for a reference for creating my custom checkbox component and I saw this method:

setDisabledState ? (isDisabled: boolean) : void {}

which comes from the ControlValueAccessor interface.
I'm not at all proficient in Typescript but if I understand correctly the question mark after the method name in an interface specifies that the method does not have to be implemented in a concrete class using that interface. Your class is a concrete class and you provided the method with a body(empty body but still). I'm having trouble figuring out what this question mark does in this specific scenario and I would much appreciate an explanation.

Thanks in advance.

Build issue on Angular 6 application

Hello @rafaelblink,

I was looking to your library but I am facing an issue at build time.
I am using Angular 6 and I think you have to update your package ;)

Stacktrace :
ng build --aot

ERROR in angular-custom-checkbox\angular-custom-checkbox.ts(6,2): Error during template compile of 'CustomCheckboxModule' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule' 'NgModule' calls 'ɵmakeDecorator'. node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. node_modules/angular-custom-checkbox/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

Will you update your package in a near future ?

Kind regards,

David

rafaelblink / angular-custom-checkbox Goto Github PK