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.
http://rafaelferreira.info/angular-custom-checkbox/
- Install with npm.
npm install angular-custom-checkbox --save- Into your
app.module.tsload theCustomCheckboxModuleand 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.
import { CustomCheckBoxModel } from 'angular-custom-checkbox';
...
export class AppExampleComponent implements OnInit {
isSelected: boolean = false;
jsonModel: CustomCheckBoxModel = new CustomCheckBoxModel();
}
<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
this.jsonModel.color = 'p-success';
this.jsonModel.colorHex = '#F500FF';
this.jsonModel.rounded = true;
this.jsonModel.icon = 'mdi mdi-check';You can use some icons frameworks like Material Design Icons or Font-Awesome.
npm install mdi --saveOR
npm install font-awesome --saveImport 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';
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent