{"id":25591379,"url":"https://github.com/bobbyg603/ngx-toggle","last_synced_at":"2025-07-19T10:38:04.592Z","repository":{"id":40892332,"uuid":"462487273","full_name":"bobbyg603/ngx-toggle","owner":"bobbyg603","description":"😻📱📐 Beautiful iOS-style toggle switch for Angular","archived":false,"fork":false,"pushed_at":"2023-03-07T03:29:22.000Z","size":730,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T10:17:06.957Z","etag":null,"topics":["angular","bobbyg603","toggle","toggle-switch","typescript"],"latest_commit_sha":null,"homepage":"https://bobbyg603.github.io/ngx-toggle","language":"TypeScript","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/bobbyg603.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2022-02-22T21:53:44.000Z","updated_at":"2025-03-31T11:43:05.000Z","dependencies_parsed_at":"2025-02-21T09:51:17.447Z","dependency_job_id":"d4723e66-aafb-453c-a015-459ca7f35311","html_url":"https://github.com/bobbyg603/ngx-toggle","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/bobbyg603/ngx-toggle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fngx-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fngx-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fngx-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fngx-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bobbyg603","download_url":"https://codeload.github.com/bobbyg603/ngx-toggle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobbyg603%2Fngx-toggle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265918976,"owners_count":23849273,"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","bobbyg603","toggle","toggle-switch","typescript"],"created_at":"2025-02-21T09:51:14.133Z","updated_at":"2025-07-19T10:38:04.548Z","avatar_url":"https://github.com/bobbyg603.png","language":"TypeScript","readme":"# NgxToggle\n![cd](https://github.com/bobbyg603/ngx-toggle/actions/workflows/cd.yml/badge.svg)\n\nA simple iOS style toggle switch for Angular projects.  \n\n## 🏗️ Installation\n\nInstall `@bobbyg603/ngx-toggle`:\n\n```sh\nnpm i @bobbyg603/ngx-toggle\n```\n\nImport the `NgxToggleModule` module in each module that uses `\u003cngx-toggle\u003e`:\n\n[app.module.ts](https://github.com/bobbyg603/ngx-toggle/blob/main/projects/ngx-toggle-example/src/app/app.module.ts)\n\n```ts\nimport { NgxToggleModule } from '@bobbyg603/ngx-toggle';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    NgxToggleModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## 🧑‍💻 Usage\n\nAdd `\u003cngx-toggle\u003e` to your component's template:\n\n[pricing.component.html](https://github.com/bobbyg603/ngx-toggle/blob/34b5da55ec9e5adf80bfa196cddb380c9d95314d/projects/ngx-toggle-example/src/app/pricing/pricing.component.html#L4-L6)\n\n```html\n\u003cngx-toggle \n  id=\"toggle-example\"\n  [(checked)]=\"checked\"\n  [disabled]=\"false\"\n  (checkedChange)=\"onCheckedChange($event)\"\u003e\n\u003c/ngx-toggle\u003e\n```\n\nBe sure to give each toggle a unique `id`. Failing to give each toggle a unique id will result in clicking one input toggling any inputs with a matching id.\n\nYou can also use `\u003cngx-toggle\u003e` as a [FormControl](https://angular.io/api/forms/FormControl):\n\n[checkout.component.html](https://github.com/bobbyg603/ngx-toggle/blob/1781fc109e1879c64c24bd82d249539911ec7587/projects/ngx-toggle-example/src/app/checkout/checkout.component.html#L71)\n\n```html\n\u003cform [formGroup]=\"formGroup\"\u003e\n  \u003cngx-toggle class=\"ms-auto\" formControlName=\"saveForNextTime\"\u003e\u003c/ngx-toggle\u003e\n\u003c/form\u003e\n```\n\n[checkout.component.ts](https://github.com/bobbyg603/ngx-toggle/blob/1781fc109e1879c64c24bd82d249539911ec7587/projects/ngx-toggle-example/src/app/checkout/checkout.component.ts#L10-L19)\n```ts\nformGroup = new FormGroup({\n  saveForNextTime: new FormControl(false)\n});\n```\n\n\n## 🧩 API\n\n### Inputs\n| Property | Type    | Description                   |\n|----------|-------- |-------------------------------|\n| id       | string  | unique identifier for input   |\n| checked  | boolean | toggle is on (checked) or off |\n| disabled | boolean | control is not interactable   |\n\n### Outputs\n| Property       | Type                    | Description                                             |\n|----------------|-------------------------|---------------------------------------------------------|\n| checkedChange  | EventEmitter\\\u003cboolean\\\u003e | Emits new `checked` value when control has been toggled |\n\n## 🤝 Attribution\n\nThe `ngx-toggle-example` layout was inspired by Benjamin King's [Pricing Cards](https://codepen.io/bballinben/pen/wyLjvm) codepen.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobbyg603%2Fngx-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbobbyg603%2Fngx-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobbyg603%2Fngx-toggle/lists"}