{"id":13491905,"url":"https://github.com/miladfm/ngx-pretty-checkbox","last_synced_at":"2026-08-02T17:04:39.239Z","repository":{"id":55071813,"uuid":"153996344","full_name":"miladfm/ngx-pretty-checkbox","owner":"miladfm","description":"Quickly integrate pretty checkbox components with Angular","archived":false,"fork":false,"pushed_at":"2024-06-20T22:16:25.000Z","size":4785,"stargazers_count":27,"open_issues_count":3,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-03T12:57:25.216Z","etag":null,"topics":["angular","checkbox","css","ngx-pretty-checkbox","pretty","pretty-checkbox","radio","radio-buttons","switch"],"latest_commit_sha":null,"homepage":"https://miladfm.github.io/ngx-pretty-checkbox/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miladfm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-21T10:28:52.000Z","updated_at":"2025-04-30T16:24:00.000Z","dependencies_parsed_at":"2024-01-16T09:37:58.100Z","dependency_job_id":"804fbb08-415f-42cf-aeae-8856bcd70fd6","html_url":"https://github.com/miladfm/ngx-pretty-checkbox","commit_stats":{"total_commits":21,"total_committers":1,"mean_commits":21.0,"dds":0.0,"last_synced_commit":"3acab27fd55abd8f52315d5965c111a74c4be61b"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/miladfm/ngx-pretty-checkbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladfm%2Fngx-pretty-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladfm%2Fngx-pretty-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladfm%2Fngx-pretty-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladfm%2Fngx-pretty-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miladfm","download_url":"https://codeload.github.com/miladfm/ngx-pretty-checkbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladfm%2Fngx-pretty-checkbox/sbom","scorecard":{"id":646931,"data":{"date":"2025-08-11","repo":{"name":"github.com/miladfm/ngx-pretty-checkbox","commit":"492c22f17d8b03e5717568515f85dcdf14514c37"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":9,"reason":"binaries present in source code","details":["Warn: binary detected: .nx/cache/18.3.3-nx.darwin-arm64.node:1"],"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}}]},"last_synced_at":"2025-08-21T12:22:42.992Z","repository_id":55071813,"created_at":"2025-08-21T12:22:42.992Z","updated_at":"2025-08-21T12:22:42.992Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36200986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-08-02T02:00:06.915Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular","checkbox","css","ngx-pretty-checkbox","pretty","pretty-checkbox","radio","radio-buttons","switch"],"created_at":"2024-07-31T19:01:01.398Z","updated_at":"2026-08-02T17:04:39.200Z","avatar_url":"https://github.com/miladfm.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n \u003cbr\u003e\n \u003ca href=\"https://miladfm.github.io/ngx-pretty-checkbox/\"\u003e\u003cimg src=\"/logo.gif\" alt=\"Pretty checkbox angular\" width=\"100\"\u003e\u003c/a\u003e\n \u003cbr\u003e \u003cbr\u003e NgxPrettyCheckbox \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eQuickly integrate pretty checkbox Components (checkbox, switch, radio button) with Angular \u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/miladfm/ngx-pretty-checkbox/releases\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/release-v1.2.1-blue.svg\"\u003e\n \u003c/a\u003e\n\n \u003ca href=\"https://github.com/angular/angular\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/angular-10.x-blue.svg\"\u003e\n \u003c/a\u003e\n\n \u003ca href=\"https://lokesh-coder.github.io/pretty-checkbox/\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/pretty--checbox-3.x-blue.svg\" alt=\"Github Release\"\u003e\n \u003c/a\u003e\n\n \u003ca href=\"LICENSE\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"Licence\"\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cdiv class=\"highlight highlight-source-shell\"\u003e\n\u003cpre\u003e\n\u003cdiv align=\"center\"\u003e\u003cstrong \u003eDemo and documentation\u003c/strong\u003e\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\u003ca align=\"center\" href=\"https://miladfm.github.io/ngx-pretty-checkbox/\"\u003ehttps://miladfm.github.io/ngx-pretty-checkbox/\u003c/a\u003e\u003c/div\u003e\n\u003c/pre\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"/preview.gif\" alt=\"Pretty checkbox preview\"/\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n\n\n### Changes log\n\n| ngx-pretty-checkbox | angular | feature |\n|---------------------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| 18.0.0 | 18.x | |\n| 17.0.1 | 17.x | |\n| 16.0.0 | 16.x | |\n| 15.1.0 | 15.x | Stateless checkbox. There is no local state to update the checkbox by the user interaction. The component emit only the new state event. Use case: for a one-way data binding. For example, when the checkbox is clicked, a request should be sent to the server and the UI should be updated if the response is successful. |\n| 15.0.0 | 15.x | Standalone component |\n| 12.0.0 | 12.x | |\n| 11.0.0 | 11.x | |\n| 1.2.0 | \u003e10.x | ivy |\n| 1.1.0 | \u003e8.x | |\n| 1.0.4 | 6.x 7.x | |\n\n### Installation\n- **Step 1**\n\nInstall the pretty-checkbox from npm or yarn package manager\n```sh\n\u003e npm install pretty-checkbox // or\n\u003e yarn add pretty-checkbox\n``` \nAlternatively, you can also use CDN link\n```sh\nhttps://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css\n```\n\n\u003cbr\u003e\n\n- **Step 2**\n\nDownload pretty-checkbox angular module from [`npm`](https://www.npmjs.com/package/ngx-pretty-checkbox) package manager\n```sh\n\u003e npm install ngx-pretty-checkbox\n```\n\n\n\u003cbr\u003e\n\n- **Step 3**\n\nAdd dist/pretty-checkbox.min.css file from node_module of pretty-checkbox in your html or import src/pretty-checkbox.scss file in your scss file\n```sh\n@import '~pretty-checkbox/src/pretty-checkbox.scss';\n```\n\u003cbr\u003e\n\n- **Step 4**\n\nAdd ngx-pretty-checkbox in your AppModule or component to import all standalone components\n```sh\nimport { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';\n\n@NgModule({\n imports: [\n ...,\n NgxPrettyCheckboxModule\n ],\n ...\n})\nexport class AppModule { \n ...\n}\n```\n\nOr import the ngx-pretty-checkbox standalone components to you component\n```sh\nimport {\n NgxPrettyCheckboxComponent,\n NgxPrettyCheckboxWillChangeComponent,\n NgxPrettyHoverComponent,\n NgxPrettyHoverWillChangeComponent,\n NgxPrettyIconDirective,\n NgxPrettyImageDirective,\n NgxPrettyIndeterminateComponent,\n NgxPrettyIndeterminateWillChangeComponent,\n NgxPrettyRadioComponent,\n NgxPrettyRadioGroupDirective,\n NgxPrettyRadioWillChangeComponent,\n NgxPrettySvgDirective,\n NgxPrettyToggleComponent,\n NgxPrettyToggleWillChangeComponent,\n} from 'ngx-pretty-checkbox';\n\n@Component({\n standalone: true,\n imports: [\n NgxPrettyCheckboxComponent,\n NgxPrettyCheckboxWillChangeComponent,\n NgxPrettyHoverComponent,\n NgxPrettyHoverWillChangeComponent,\n NgxPrettyIndeterminateComponent,\n NgxPrettyIndeterminateWillChangeComponent,\n NgxPrettyRadioComponent,\n NgxPrettyRadioWillChangeComponent,\n NgxPrettyToggleComponent,\n NgxPrettyToggleWillChangeComponent,\n NgxPrettyIconDirective,\n NgxPrettyImageDirective,\n NgxPrettyRadioGroupDirective,\n NgxPrettySvgDirective\n ],\n selector: 'my-component',\n ...\n})\nexport class MyComponent {\n}\n```\n\u003cbr\u003e\n\n- **Step 5**\n\nBasic usage\n```sh\n\u003cp-checkbox\u003e\n Default\n\u003c/p-checkbox\u003e\n```\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n\nStateless usage\n```sh\n@Component({\n standalone: true,\n imports: [NgxPrettyCheckboxComponent],\n selector: 'app-root',\n template: `\n \u003cp-checkbox [stateless]=\"true\" [checked]=\"checked\" (change)=\"onStateChange($event)\"\u003eStateless Checkbox\u003c/p-checkbox\u003e\n `\n})\nexport class MyComponent {\n \n public checked = false;\n\n private http = inject(HttpClient);\n private cd = inject(ChangeDetectorRef);\n \n onStateChange(change: PrettyCheckBoxChange) {\n this.http.post(...).subscribe(_ =\u003e {\n this.checked = true;\n this.cd.detectChanges();\n })\n }\n}\n```\n## More demos and document\n\nThere are more features like ***Radio buttons*** , ***Toggle*** , ***States*** , ***Animations*** , ***Border less*** , ***Lock*** , ***Scale***, ***SCSS Settings***.\n\nPlease refer the [documentation](https://miladfm.github.io/ngx-pretty-checkbox/) to know about them.\n\n\u003cbr\u003e\u003cbr\u003e\n\n### Browser support\n\nWorks in all modern browsers.\n\n`Chrome \u003e= 26` `Firefox \u003e= 16` `Safari \u003e= 6.1` `Opera \u003e= 15` `IE \u003e= 9`\n\n### License\nThis project is licensed under the MIT License. Copyright (c) milad faghihi.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiladfm%2Fngx-pretty-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiladfm%2Fngx-pretty-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiladfm%2Fngx-pretty-checkbox/lists"}