{"id":16429559,"url":"https://github.com/stevermeister/angular-switchery","last_synced_at":"2025-06-28T13:34:56.528Z","repository":{"id":57179209,"uuid":"86457314","full_name":"stevermeister/angular-switchery","owner":"stevermeister","description":"pure Angular (2+) Implementation of switchery (https://github.com/abpetkov/switchery) form control","archived":false,"fork":false,"pushed_at":"2023-01-03T10:40:59.000Z","size":328,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T01:12:12.131Z","etag":null,"topics":["angular","angular2","angular4","form-controls","switchery"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/angular-fcr9gv","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/stevermeister.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}},"created_at":"2017-03-28T12:29:04.000Z","updated_at":"2023-01-26T19:24:31.000Z","dependencies_parsed_at":"2023-02-01T06:00:55.147Z","dependency_job_id":null,"html_url":"https://github.com/stevermeister/angular-switchery","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/stevermeister%2Fangular-switchery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevermeister%2Fangular-switchery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevermeister%2Fangular-switchery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevermeister%2Fangular-switchery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevermeister","download_url":"https://codeload.github.com/stevermeister/angular-switchery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238412975,"owners_count":19467932,"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","angular2","angular4","form-controls","switchery"],"created_at":"2024-10-11T08:23:26.998Z","updated_at":"2025-02-12T04:31:09.124Z","avatar_url":"https://github.com/stevermeister.png","language":"TypeScript","readme":"# Angular Switchery\n\n![angular-switchery](https://user-images.githubusercontent.com/1526680/28157705-9b59934c-67b7-11e7-95f7-6d655ae5d714.png)\n\nAngular (2+) Implementation of [switchery](https://github.com/abpetkov/switchery) form control\nWorks with Angular 15\n\n[Demo](https://stackblitz.com/edit/angular-switchery-sandbox)\n\n## Description\n\nAngular-Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.\n\nSupported by all modern browsers: Chrome, Firefox, Opera, Safari, IE9+\n\n![screen shot 2017-08-25 at 15 15 15](https://user-images.githubusercontent.com/1526680/29715591-4ed60646-89a8-11e7-8d6b-2712e6dd4e85.png)\n\n## Installation\n\n##### Npm:\n\n```shell\n$ npm install angular-switchery\n```\n\n\n## Usage\n\n```js\nimport {AngularSwitcheryModule} from 'angular-switchery'\n```\n\n## Import module dependency:\n\n```js\n   ...\n   imports: [\n   ...\n    AngularSwitcheryModule\n   ...\n   ]\n   ```\n```\n\n## Examples\n\n##### Checked\n\nOnly thing you need is to add a `checked` attribute to your checkbox input. Simple as that.\n\n```html\n\u003cangular-switchery\u003e\u003c/angular-switchery\u003e\n```\n\n##### Disabled\n\n```html\n\u003cangular-switchery disabled=\"disabled\"\u003e\u003c/angular-switchery\u003e\n```\n\n##### NgModel\n\n```html\n \u003cangular-switchery [(ngModel)]=\"swticherModel\"\u003e\u003c/angular-switchery\u003e\n \u003cangular-switchery [(ngModel)]=\"swticherModel\"\u003e\u003c/angular-switchery\u003e\n Switcher: {{swticherModel? 'ON' : 'OFF'}}\n```\n\n##### Reactive approach\n\n```html\n\u003cangular-switchery #f=\"ngForm\" [formControl]=\"switcheryControl\"\u003e\u003c/angular-switchery\u003e\nswitcheryControl.value : {{f.value}}\n```\n\nYou can play with all the examples [here](https://stackblitz.com/edit/angular-fcr9gv)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevermeister%2Fangular-switchery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevermeister%2Fangular-switchery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevermeister%2Fangular-switchery/lists"}