{"id":22898454,"url":"https://github.com/sayegh7/ngx-wheel","last_synced_at":"2025-06-16T05:11:37.996Z","repository":{"id":26894918,"uuid":"110486773","full_name":"Sayegh7/ngx-wheel","owner":"Sayegh7","description":"Angular Prize Winning Wheel ","archived":false,"fork":false,"pushed_at":"2023-04-20T04:28:22.000Z","size":5618,"stargazers_count":28,"open_issues_count":35,"forks_count":21,"subscribers_count":1,"default_branch":"rc","last_synced_at":"2025-04-01T01:52:31.626Z","etag":null,"topics":["angular","ngx-wheel","prize","wheel","wheel-segments"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-wheel","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/Sayegh7.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-13T01:46:07.000Z","updated_at":"2024-03-11T06:30:46.000Z","dependencies_parsed_at":"2024-06-19T00:00:35.964Z","dependency_job_id":"c529b44a-b971-4ab7-a4d5-d0ae961783a8","html_url":"https://github.com/Sayegh7/ngx-wheel","commit_stats":{"total_commits":20,"total_committers":2,"mean_commits":10.0,"dds":"0.050000000000000044","last_synced_commit":"97b6f7191c968c558da9245ba513f7af6f7b77ee"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/Sayegh7/ngx-wheel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayegh7%2Fngx-wheel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayegh7%2Fngx-wheel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayegh7%2Fngx-wheel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayegh7%2Fngx-wheel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sayegh7","download_url":"https://codeload.github.com/Sayegh7/ngx-wheel/tar.gz/refs/heads/rc","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayegh7%2Fngx-wheel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260103193,"owners_count":22959052,"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","ngx-wheel","prize","wheel","wheel-segments"],"created_at":"2024-12-14T00:32:20.660Z","updated_at":"2025-06-16T05:11:37.980Z","avatar_url":"https://github.com/Sayegh7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-wheel\n\n## [Click here for demo](https://ngx-wheel.web.app/)\n\n[![npm version](https://badge.fury.io/js/ngx-wheel.svg)](https://badge.fury.io/js/ngx-wheel)\n![npm](https://img.shields.io/npm/dt/ngx-wheel.svg)\n\nngx-wheel is an open-source Angular library which creates a dynamic prize-winning wheel. It is used to display predetermined winnings while appearing to be random to the user. This can be used to allow a server to determine the prize before the wheel spins, then the wheel would spin and land on the prize that the server selected.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://i.ibb.co/mHK67T9/example.png\" width=200 height=200 alt=\"example\" border=\"0\"\u003e\u003c/p\u003e\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ngx-wheel --save\n```\n\nThen inside your `index.html` file located in the `src` directory add these 2 lines to the `\u003chead\u003e` tag:\n```html\n\u003cscript src=\"https://rawcdn.githack.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/Winwheel.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js\"\u003e\u003c/script\u003e\n\n```\n\n## Usage\n\nImport the module\n```typescript\nimport { NgxWheelModule } from 'ngx-wheel'; //\u003c-- import here\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    NgxWheelModule  //\u003c-- and here\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nOnce your library is imported, you can use its main component, ngx-wheel in your Angular application:\n\n```xml\n\u003cngx-wheel\n  width='600'\n  height='600'\n  spinDuration='8'\n  [disableSpinOnClick]='true'\n  [items]='items'\n  [innerRadius]='50'\n  [spinAmount]='10'\n  [textOrientation]='textOrientation'\n  [textAlignment]='textAlignment'\n  pointerStrokeColor='red'\n  pointerFillColor='purple'\n  [idToLandOn]='idToLandOn'\n  (onSpinStart)='before()'\n  (onSpinComplete)='after()'\n\u003e\n\u003c/ngx-wheel\u003e\n```\n\n\n### Options\n\n#### Inputs\n- `height` is the height of the wheel canvas\n- `width` is the width of the wheel canvas\n- `spinDuration` is the number of seconds the wheel wil be spinning for\n- `spinAmount` is the number of spins the wheel will make before stopping\n- `innerRadius` is the inner radius of the wheel. Allows you to make the wheel hollow from the center\n- `pointerStrokeColor` is the color of the pointer's stroke\n- `pointerFillColor` is the color of the pointer's fill\n- `textAlignment` and `textOrientation` both have the types `TextAlignment` and `TextOrientation`, respectively. Check the [Full Reference](http://dougtesting.net/winwheel/docs/tut6_text_alignment) for visual examples.\n- `disableSpinOnClick` disabled the default behaviour of spinning the wheel on clicking it. See [this section](#spinning-with-your-own-button)\n- `idToLandOn` is the `id` value of the `item` to land on (Can be fetched from server)\n- `items` is an array of of JSON objects that represent thw wheel's segments. Check the [Full Reference](http://dougtesting.net/winwheel/refs/class_segment) for more details.\n#### Outputs\n- `onSpinStart` is called before the wheel spin\n- `onSpinComplete` is called after the wheel spin\n\n### Accessing wheel functions\n\nA couple of common use cases that were frequently requested was the ability to spin the wheel on button click and re-spinning the wheel. This is easily doable in version 4+.\n\n- Pass `true` to the `disableSpinOnClick` prop to disable spinning when clicking on the wheel. This is optional.\n\n- Add a ref `#wheel` to the wheel (any name works):\n```xml\n\u003cngx-wheel\n  #wheel\n  width='600'\n  height='600'\n  spinDuration='8'\n  [disableSpinOnClick]='true'\n  [items]='items'\n  [innerRadius]='50'\n  [spinAmount]='10'\n  pointerStrokeColor='red'\n  pointerFillColor='purple'\n  [idToLandOn]='idToLandOn'\n  (onSpinStart)='before()'\n  (onSpinComplete)='after()'\n\u003e\n\u003c/ngx-wheel\u003e\n```\n- In your parent component ts file, refer to the wheel using `ViewChild`\n```typescript\nimport { ..., ViewChild, ... } from '@angular/core';\nimport { NgxWheelComponent } from 'ngx-wheel';\n\n// ...\n\nexport class ParentComponent {\n   @ViewChild(NgxWheelComponent, { static: false }) wheel;\n\n   ngAfterViewInit() {\n      console.log('only after THIS EVENT \"wheel\" is usable!!');\n      // Call the spin function whenever and wherever you want after the AfterViewInit Event\n      this.wheel.spin();\n   }\n\n   reset(){\n      // Reset allows you to redraw the wheel\n      // Use it after any change to wheel configurations or to allow re-spinning\n      this.wheel.reset();\n   }\n}\n```\n\nOne thing to keep in mind when using the spin function this way. If you want to change the `idToLandOn`, you need to wait for a tick before calling the `spin` function in order for the update to propagate:\n```typescript\n  async spin(prize) {\n    this.idToLandOn = prize\n    await new Promise(resolve =\u003e setTimeout(resolve, 0)); // Wait here for one tick\n    this.wheel.spin()\n  }\n```\n\n## License\n\nMIT © [Ahmed El Sayegh](mailto:ahmedelsayegh7@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayegh7%2Fngx-wheel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsayegh7%2Fngx-wheel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayegh7%2Fngx-wheel/lists"}