{"id":13495643,"url":"https://github.com/rafaelblink/angular-custom-checkbox","last_synced_at":"2025-03-28T16:33:06.940Z","repository":{"id":140626033,"uuid":"121695792","full_name":"rafaelblink/angular-custom-checkbox","owner":"rafaelblink","description":"This is a very simple library to create custom checkboxes with Angular 2+ projects.","archived":false,"fork":false,"pushed_at":"2019-03-08T02:13:19.000Z","size":2469,"stargazers_count":8,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-31T10:36:50.322Z","etag":null,"topics":["angular2","angular4","angular5","angular7","checkbox-component","checkboxes","font-awesome","material-design-icons"],"latest_commit_sha":null,"homepage":"http://rafaelferreira.info/angular-custom-checkbox/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rafaelblink.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-15T23:29:38.000Z","updated_at":"2021-02-17T09:50:05.000Z","dependencies_parsed_at":"2024-01-16T09:53:56.299Z","dependency_job_id":"2fe52277-386c-4b74-ab57-424af34345cd","html_url":"https://github.com/rafaelblink/angular-custom-checkbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelblink%2Fangular-custom-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelblink%2Fangular-custom-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelblink%2Fangular-custom-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaelblink%2Fangular-custom-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafaelblink","download_url":"https://codeload.github.com/rafaelblink/angular-custom-checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246063167,"owners_count":20717756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular2","angular4","angular5","angular7","checkbox-component","checkboxes","font-awesome","material-design-icons"],"created_at":"2024-07-31T19:01:36.680Z","updated_at":"2025-03-28T16:33:06.456Z","avatar_url":"https://github.com/rafaelblink.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Angular Custom Checkbox \n\n[![NPM](https://nodei.co/npm/angular-custom-checkbox.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/angular-custom-checkbox/)\n\nThis is a very simple library to create custom checkboxes with Angular 2+ projects.\n\n**PS: This library use [pretty-checkbox](https://lokesh-coder.github.io/pretty-checkbox) to create the customs checkboxes.**\n\n## Demo\n\nhttp://rafaelferreira.info/angular-custom-checkbox/\n\n## Quick start\n\n- Install with [npm](https://www.npmjs.com/).\n\n```bash\nnpm install angular-custom-checkbox --save\n```\n\n- Into your ``app.module.ts`` load the ``CustomCheckboxModule`` and add your imports.\n\n```bash\nimport { CustomCheckboxModule } from 'angular-custom-checkbox';\n```\n Adding in your imports.\n\n```bash \n  imports: [\n    ...\n    CustomCheckboxModule,\n    ...\n  ],\n```\n\nOk, your library is installed :)\nLet's go create the first checkbox.\n\n## Basic Configuration\n\n### TS\n```bash\nimport { CustomCheckBoxModel } from 'angular-custom-checkbox';\n...\n\nexport class AppExampleComponent implements OnInit  {  \n  isSelected: boolean = false;\n  jsonModel: CustomCheckBoxModel = new CustomCheckBoxModel();\n}\n\n```\n### HTML\n```bash\n\u003cngx-checkbox [configuration]=\"jsonModel\" [(ngModel)]=\"isSelected\" name=\"isSelected\"\u003e\u003c/ngx-checkbox\u003e\n```\n\n**PS: Use variable on ngModel as boolean.**\n\n**Colors Available:**\n\n- p-primary\n- p-success \n- p-danger\n- p-info\n- p-warning\n\n## Advanced Configuration\n\n```bash\nthis.jsonModel.color = 'p-success';\nthis.jsonModel.colorHex = '#F500FF';\nthis.jsonModel.rounded = true;\nthis.jsonModel.icon = 'mdi mdi-check';\n```\n\n## Icons:\n\nYou can use some icons frameworks like **Material Design Icons** or **Font-Awesome**.\n\n```bash \nnpm install mdi --save\n```\nOR\n\n```bash \nnpm install font-awesome --save\n```\n\nImport the css files to your ``.angular-cli.json`` like:\n\n```bash\n\"styles\": [\n  \"styles.css\",\n  \"../node_modules/mdi/css/materialdesignicons.min.css\",\n  \"../node_modules/font-awesome/css/font-awesome.min.css\"\n],\n```\n\nAnd use for example: \n\n```bash \nthis.jsonModel.icon = 'fa fa-check';\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaelblink%2Fangular-custom-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafaelblink%2Fangular-custom-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaelblink%2Fangular-custom-checkbox/lists"}