{"id":13491905,"url":"https://github.com/miladfm/ngx-pretty-checkbox","last_synced_at":"2025-03-28T08:33:38.733Z","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-04-24T09:17:41.000Z","size":2237,"stargazers_count":26,"open_issues_count":3,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-24T13:52:22.779Z","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":"2024-06-18T22:53:42.163Z","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,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245997082,"owners_count":20707401,"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":["angular","checkbox","css","ngx-pretty-checkbox","pretty","pretty-checkbox","radio","radio-buttons","switch"],"created_at":"2024-07-31T19:01:01.398Z","updated_at":"2025-03-28T08:33:37.249Z","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"}