{"id":45616203,"url":"https://github.com/vicmans/ng-toggle-button","last_synced_at":"2026-02-23T18:14:17.078Z","repository":{"id":37617059,"uuid":"254429467","full_name":"vicmans/ng-toggle-button","owner":"vicmans","description":"Angular toggle button switch","archived":false,"fork":false,"pushed_at":"2025-07-14T20:09:32.000Z","size":2306,"stargazers_count":9,"open_issues_count":2,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-20T22:36:56.617Z","etag":null,"topics":["angular","button","component-library","toggle-button","toggle-switch","toogleswitch"],"latest_commit_sha":null,"homepage":"https://ng-toggle-button.netlify.app/","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/vicmans.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":"vicmans"}},"created_at":"2020-04-09T16:53:27.000Z","updated_at":"2025-07-14T20:07:43.000Z","dependencies_parsed_at":"2024-06-18T22:48:30.770Z","dependency_job_id":"9b7ee954-0847-490b-a444-e8a8f9f11cee","html_url":"https://github.com/vicmans/ng-toggle-button","commit_stats":{"total_commits":62,"total_committers":5,"mean_commits":12.4,"dds":0.3709677419354839,"last_synced_commit":"3ac7fc6d16f42d804bb3db6d466101132c4498f0"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/vicmans/ng-toggle-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicmans%2Fng-toggle-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicmans%2Fng-toggle-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicmans%2Fng-toggle-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicmans%2Fng-toggle-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vicmans","download_url":"https://codeload.github.com/vicmans/ng-toggle-button/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicmans%2Fng-toggle-button/sbom","scorecard":{"id":920263,"data":{"date":"2025-08-11","repo":{"name":"github.com/vicmans/ng-toggle-button","commit":"569ced1a2c6bcf12242e965490ac16e728c5c99c"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.6,"checks":[{"name":"Maintained","score":2,"reason":"3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"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":"Code-Review","score":1,"reason":"Found 3/28 approved changesets -- score normalized to 1","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":"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":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"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":"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":"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":"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":"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"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 14 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":8,"reason":"2 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-25T01:23:34.631Z","repository_id":37617059,"created_at":"2025-08-25T01:23:34.631Z","updated_at":"2025-08-25T01:23:34.631Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29750164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","button","component-library","toggle-button","toggle-switch","toogleswitch"],"created_at":"2026-02-23T18:14:15.794Z","updated_at":"2026-02-23T18:14:17.071Z","avatar_url":"https://github.com/vicmans.png","language":"HTML","readme":"\n# AngularToggleButton\n\n[![npm version](https://img.shields.io/npm/v/ng-toggle-button.svg)][npm-url]\n[![npm dlm](https://img.shields.io/npm/dm/ng-toggle-button)][npm-url]\n[![Netlify Status](https://api.netlify.com/api/v1/badges/a28b65dc-53df-41d9-a660-d2741f833233/deploy-status)][demo-url]\n\n[npm-url]: https://www.npmjs.com/package/ng-toggle-button\n[demo-url]: https://ng-toggle-button.netlify.app\n\nThis is a toggle switch button component, you can see the demo [here][demo-url] and test it in [StackBlitz](https://stackblitz.com/edit/ng-toggle-button).\n\n## Versions\n\n| Angular  | ng-toggle-button|\n| -------- |:------:|\n| \u003e=19.0.0 | v1.9.x |\n| \u003e=18.0.0 | v1.8.x |\n| \u003e=17.0.0 | v1.7.x |\n| \u003e=16.0.0 | v1.6.x |\n| \u003e=15.0.0 | v1.5.x |\n| \u003e=14.0.0 | v1.4.x |\n| \u003e=13.0.0 | v1.3.x |\n| \u003e=12.0.0 | v1.2.x |\n| \u003e=11.0.0 | v1.1.x |\n| \u003e=10.0.0 | v1.0.x |\n| \u003e=9.0.0  | v0.2.x |\n| v8.x.x   | v0.1.x |\n\n## Instalation\n\n```\nnpm i ng-toggle-button\n```\n\nor\n\n```\nyarn add ng-toggle-button\n```\n\n## Usage\n\n### Standalone: Import the component.\n\n```typescript\nimport { NgToggleComponent } from 'ng-toggle-button';\n@Component({\n  selector: 'your-component',\n  standalone: true,\n  imports: [\n    ...,\n    NgToggleComponent,\n  ],\n  ...\n})\n```\n\n### NgModule: Import the module\n\n```typescript\nimport { NgToggleModule } from 'ng-toggle-button';\n@NgModule({\n  ...\n  imports: [\n    ...,\n    NgToggleModule\n  ],\n})\n```\n\nAlso, you can pass a global configuration for all `ng-toggle` component in your app\n\n```typescript\nimport { NgToggleModule } from 'ng-toggle-button';\n@NgModule({\n  ...\n  imports: [\n    ...,\n    NgToggleModule.forRoot(config)\n  ],\n})\n```\n\nYou can edit the configuration globally by injecting `NgToggleConfig` service usually in the root component.\n\n```ts\nconstructor(private config: NgToggleConfig) {\n  this.config.labels: {\n    unchecked: 'off',\n    checked: 'on',\n  };\n  this.config.color = 'crimson';\n}\n```\n\nUsage in template\n\n```html\n\u003cng-toggle\n  [value]=\"true\"\n  [color]=\"{\n    unchecked: '#939da2',\n    checked: '#f62d51'\n  }\"\n\u003e\u003c/ng-toggle\u003e\n```\n\nThe `config` object is described in the table bellow\n\n### Properties\n\n| Name | Type | Default | Description |\n|-------------|--------------------|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| value | `boolean` | `false` | Initial state of the toggle button |\n| speed | `number` | `300` | Transition time for the animation |\n| disabled | `boolean` | `false` | Button does not react on mouse events |\n| color | `string` | `#0099CC` | If `String` - color of the button when checked \u003cbr\u003eIf `toggleConfig` - colors for the button when checked/unchecked or disabled\u003cbr\u003eExample: `{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}` |\n| labels | `boolean | Object` | `false` | If `boolean` - shows/hides default labels \u003cbr\u003eIf `Object` - sets custom labels for both states. \u003cbr\u003eExample: `{checked: 'Foo', unchecked: 'Bar'}` |\n| switchColor | `string | toggleConfig` | `#fff` | If `string` - color or background property of the switch when checked \u003cbr\u003eIf `toggleConfig` - colors or background property for the switch when checked/uncheked or disabled \u003cbr\u003eExample: `{checked: '#25EF02', unchecked: 'silver', disabled: '#fff'}` |\n| width | `number` | `50` | Width of the button |\n| height | `number` | `22` | Height of the button |\n| margin | `number` | `3` | Space between the switch and background border |\n| name | `string` | `undefined` | Name to attach to the generated input field |\n| fontSize | `number` | `10` | Font size in pixels |\n| fontColor | `string | toggleConfig` | `undefined` | If `string` - color when checked \u003cbr\u003eIf `toggleConfig` - colors for labels when checked/uncheked \u003cbr\u003eExample: `{checked: '#25EF02', unchecked: '#35DB15'}` by default the text color is white.|\n| textAlign | `string \\| toggleConfig` | `{checked: 'left', unchecked: 'right'}` | If `string`: text-align is applied both `checked` and `unchecked` labels\u003cbr\u003eIf `toggleConfig`: Text align of checked/unchecked labels\u003cbr\u003eExample: `{checked: 'center', unchecked: 'center'}`|\n| values | `{checked: any, unchecked: any}` | `{checked: true, unchecked: false}` | Values for checked and unchecked states, by default checked value is `true` and unchecked value is `false` \u003cbr\u003eExample: `{checked: 1, unchecked: 0}`.|\n\n`toggleConfig` type is described below:\n\n```ts\ntoggleConfig = {\n  checked: string;\n  unchecked: string;\n  disabled?: string;\n};\n```\n\n### Outputs events\n\n| Name   | Payload | Description |\n| ---    | ------  | -------     |\n| change | value   | Triggered when state of the component changes. \u003cbr\u003eContains: \u003cbr\u003e`value` - state of the button |\n\n### Keyboard Accessibility (WCAG)\n\nThe toggle is tabbable, and can be triggered using the spacebar - WCAG 2.4.3(A)\n\n## Development server\n\nClone this repo and download the dependencies.\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`.\n","funding_links":["https://github.com/sponsors/vicmans"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicmans%2Fng-toggle-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvicmans%2Fng-toggle-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicmans%2Fng-toggle-button/lists"}