Angular Prize-Winning Spinning Wheel Javascript | ngx-wheel

ngx-wheel is an open-source Angular library that creates an award-winning dynamic wheel. It is used to display the pre-determined winnings while appearing randomly to the user. This can be used to allow the server to select the prize before the wheel spins, then the wheel spins and lands on the prize chosen by the server.

ngx wheel, angular wheel picker, css prize wheel, jquery spinning wheel example, angular winwheel, lucky wheel html code, css spinning wheel, spinning wheel javascript code

How to make use of it:


$ npm install ngx-wheel --save

1. Import the module.

import { NgxWheelModule } from 'ngx-wheel'; //<-- import here

  declarations: [
  imports: [
    NgxWheelModule  //<-- and here
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

2. Once your library is imported, you can use its main component, ngx-wheel in your Angular application:




  • height is the height of the wheeled canvas
  • width is the width of the wheeled canvas
  • spinDuration is the number of seconds the wheel will be spinning for
  • spinAmount is the number of spins the wheel will make before stopping
  • innerRadius is the inner radius of the wheel. Allows you to make the wheel hollow from the center
  • pointerStrokeColor is the color of the pointer’s stroke
  • pointerFillColor is the color of the pointer’s fill
  • textAlignment and textOrientation both have the types TextAlignment and TextOrientation, respectively.
  • disableSpinOnClick disabled the default behavior of spinning the wheel on clicking it.
  • idToLandOn is the id value of the item to land on (Can be fetched from server)
  • items is an array of JSON objects that represent the wheel’s segments.


  • onSpinStart is called before the wheel spin
  • onSpinComplete is called after the wheel spin

angular prize winning wheel, ngx-wheel Plugin/Github

See Demo And Download

Official Website(Sayegh7): Click Here

This superior jQuery/javascript plugin is developed by Sayegh7. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…