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:

Installation:

$ npm install ngx-wheel --save

1. Import the module.

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

@NgModule({
  declarations: [
    AppComponent
  ],
  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:

<ngx-wheel
  width='600'
  height='600'
  spinDuration='8'
  [disableSpinOnClick]='true'
  [items]='items'
  [innerRadius]='50'
  [spinAmount]='10'
  [textOrientation]='textOrientation'
  [textAlignment]='textAlignment'
  pointerStrokeColor='red'
  pointerFillColor='purple'
  [idToLandOn]='idToLandOn'
  (onSpinStart)='before()'
  (onSpinComplete)='after()'
>
</ngx-wheel>

Options

Inputs

• 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.

Outputs

• 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.