{"id":14779594,"url":"https://github.com/OuterlimitsTech/olt-ngx-ui-switch","last_synced_at":"2025-09-14T22:31:00.707Z","repository":{"id":57820652,"uuid":"528185181","full_name":"OuterlimitsTech/olt-ngx-ui-switch","owner":"OuterlimitsTech","description":"Angular UI Switch (Forked)","archived":false,"fork":false,"pushed_at":"2024-09-08T22:00:57.000Z","size":1076,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-02T09:50:03.795Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/OuterlimitsTech.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":"2022-08-23T22:39:07.000Z","updated_at":"2025-07-24T14:36:51.000Z","dependencies_parsed_at":"2024-09-08T23:19:26.522Z","dependency_job_id":"ab42f884-35a8-42c9-bc75-34e53632b588","html_url":"https://github.com/OuterlimitsTech/olt-ngx-ui-switch","commit_stats":{"total_commits":2,"total_committers":2,"mean_commits":1.0,"dds":0.5,"last_synced_commit":"5accfb5ce0dbb9ca7bd8e974aed71ce76fdade21"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/OuterlimitsTech/olt-ngx-ui-switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-ui-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-ui-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-ui-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-ui-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OuterlimitsTech","download_url":"https://codeload.github.com/OuterlimitsTech/olt-ngx-ui-switch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-ui-switch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275179783,"owners_count":25419063,"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","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"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":[],"created_at":"2024-09-17T01:00:53.585Z","updated_at":"2025-09-14T22:31:00.356Z","avatar_url":"https://github.com/OuterlimitsTech.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Table of contents"],"sub_categories":["[Sep 16, 2024](/content/2024/09/16/README.md)","Third Party Components"],"readme":"## This library was copied from [https://github.com/webcat12345/ngx-ui-switch](https://github.com/webcat12345/ngx-ui-switch)\n\nWe use this library, and it seems that it takes several months for the owners to update after a major version Angular update.\n\n# Angular UI Switch Component\n\n## Description\n\nThis is a simple iOS 7 style switch component for [Angular](https://angular.io).\n\nLive [demo](https://webcat12345.github.io/ngx-ui-switch/demo/)\n\nA [stackblitz](https://stackblitz.com) is also available [here](https://stackblitz.com/edit/ngx-ui-switch)\n\n![alt](logo.png)\n\nInspired by [switchery](https://github.com/abpetkov/switchery) in [Angular](https://angular.io).\n\n## Installation\n\nnpm: `npm install olt-ngx-ui-switch`\n\nyarn: `yarn add olt-ngx-ui-switch`\n\n## Usage\n\n- Import into a module (`AppModule` example below)\n\n```typescript\n// app.module.ts\nimport { OltUiSwitchModule } from \"olt-ngx-ui-switch\";\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  imports: [BrowserModule, OltUiSwitchModule],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n- Add default css file to appropriate project(s) `angular.json`\n\n```json\n\"styles\": [\n  \"src/styles.css\",\n  \"./node_modules/olt-ngx-ui-switch/ui-switch.component.css\"\n]\n```\n\nAlternatively, the scss version can be imported into a scss file:\n\n```scss\n@import \"~olt-ngx-ui-switch/ui-switch.component.scss\";\n```\n\n## Global config\n\nUse when you want to change default values globally.\n\nThese settings will override anything passed in via property bindings.\n\n```javascript\nimport { OltUiSwitchModule } from \"olt-ngx-ui-switch\";\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    OltUiSwitchModule.forRoot({\n      size: \"small\",\n      color: \"rgb(0, 189, 99)\",\n      switchColor: \"#80FFA2\",\n      defaultBgColor: \"#00ACFF\",\n      defaultBoColor: \"#476EFF\",\n      checkedLabel: \"on\",\n      uncheckedLabel: \"off\",\n    }),\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n```html\n\u003colt-ui-switch\u003e\u003c/olt-ui-switch\u003e\n```\n\n# Two way binding\n\n```html\n\u003colt-ui-switch [(ngModel)]=\"enable\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n# Params\n\n### checked\n\n\u003e type: _boolean_\n\n\u003e default: false\n\n```html\n\u003colt-ui-switch checked\u003e\u003c/olt-ui-switch\u003e\n\u003colt-ui-switch [checked]=\"false\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### disabled\n\n\u003e type: _boolean_\n\n\u003e default: false\n\n```html\n\u003colt-ui-switch disabled\u003e\u003c/olt-ui-switch\u003e\n\u003colt-ui-switch checked [disabled]=\"true\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### loading\n\n_Show a loading state for the toggle button when true. Often utilized with beforeChange._\n\n\u003e type: _boolean_\n\n\u003e default: false\n\n```html\n\u003colt-ui-switch [loading]=\"isLoading\"\u003e\n  \u003ci class=\"fa fa-spinner fa-pulse\" *ngIf=\"isLoading\"\u003e\u003c/i\u003e\n\u003c/olt-ui-switch\u003e\n```\n\n### change\n\n\u003e type: _boolean_\n\n\u003e default: noop\n\n```html\n\u003colt-ui-switch (change)=\"onChange($event)\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### changeEvent\n\n\u003e type: _MouseEvent_\n\n\u003e default: noop\n\n```html\n\u003colt-ui-switch (changeEvent)=\"onChangeEvent($event)\"\u003e\u003c/olt-ui-switch\u003e\n\u003colt-ui-switch (changeEvent)=\"$event.stopPropagation()\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### valueChange\n\n\u003e type: _boolean_\n\n\u003e default: noop\n\n```html\n\u003colt-ui-switch (valueChange)=\"onValueChange($event)\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### beforeChange\n\nUtilize an observable to check that the toggle event should complete\n\n\u003e type: _Observable\\\u003cboolean\\\u003e_\n\n\u003e default: noop\n\n```html\n\u003colt-ui-switch [beforeChange]=\"OnBeforeChange\"\u003e \u003c/olt-ui-switch\u003e\n```\n\n```typescript\nOnBeforeChange: Observable\u003cboolean\u003e = new Observable((observer) =\u003e {\n  const timeout = setTimeout(() =\u003e {\n    observer.next(true);\n  }, 2000);\n  return () =\u003e clearTimeout(timeout);\n});\n```\n\n### size\n\n\u003e type: _string_\n\n\u003e default: medium\n\n```html\n\u003colt-ui-switch size=\"small\"\u003e\u003c/olt-ui-switch\u003e\n\u003colt-ui-switch size=\"large\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### reverse\n\n\u003e type: _boolean_\n\n\u003e default: false\n\n```html\n\u003colt-ui-switch reverse\u003e\u003c/olt-ui-switch\u003e\n```\n\n### color\n\n\u003e type: _string_\n\n\u003e default: rgb(100, 189, 99)\n\n```html\n\u003colt-ui-switch color=\"red\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### switchColor\n\n\u003e type: _string_\n\n\u003e default: #fff\n\n```html\n\u003colt-ui-switch switchColor=\"#fcfcfc\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### defaultBgColor\n\nDefault background color\n\n\u003e type: _string_\n\n\u003e default: #fff\n\n```html\n\u003colt-ui-switch defaultBgColor=\"red\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### defaultBoColor\n\n_Default border color_\n\n\u003e type: _string_\n\n\u003e default: #dfdfdf\n\n```html\n\u003colt-ui-switch defaultBoColor=\"black\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### checkedLabel\n\n_Checked label (on)_\n\n\u003e type: _string_\n\n\u003e default: null\n\n```html\n\u003colt-ui-switch checkedLabel=\"on\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### uncheckedLabel\n\n_Unchecked label (off)_\n\n\u003e type: _string_\n\n\u003e default: null\n\n```html\n\u003colt-ui-switch uncheckedLabel=\"off\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### checkedTextColor\n\nchecked text color of the label (on)\n\n\u003e type: _string_\n\n\u003e default: black\n\n```html\n\u003colt-ui-switch checkedTextColor=\"#7CFC00\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n### uncheckedTextColor\n\nUnchecked text color of the label (off)\n\n\u003e type: _string_\n\n\u003e default: black\n\n```html\n\u003colt-ui-switch uncheckedTextColor=\"red\"\u003e\u003c/olt-ui-switch\u003e\n```\n\n## Switch Content\n\n```html\n\u003colt-ui-switch uncheckedLabel=\"off\"\u003e\n  \u003cimg src=\"\" /\u003e\n\u003c/olt-ui-switch\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOuterlimitsTech%2Folt-ngx-ui-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOuterlimitsTech%2Folt-ngx-ui-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOuterlimitsTech%2Folt-ngx-ui-switch/lists"}