ngx-wheel
ngx-wheel copied to clipboard
Sayegh7
Angular Prize Winning Wheel
ngx-wheel
Click here for demo
ngx-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.
Installation
To install this library, run:
$ npm install ngx-wheel --save
Then inside your index.html file located in the src directory add these 2 lines to the <head> tag:
<script src="https://rawcdn.githack.com/zarocknz/javascript-winwheel/229a47acc3d7fd941d72a3ba9e1649751fd10ed5/Winwheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Usage
Import the module
import { NgxWheelModule } from 'ngx-wheel'; //<-- import here
@NgModule({
declarations: [
AppComponent
],
imports: [
NgxWheelModule //<-- and here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
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
-
heightis the height of the wheel canvas -
widthis the width of the wheel canvas -
spinDurationis the number of seconds the wheel wil be spinning for -
spinAmountis the number of spins the wheel will make before stopping -
innerRadiusis the inner radius of the wheel. Allows you to make the wheel hollow from the center -
pointerStrokeColoris the color of the pointer's stroke -
pointerFillColoris the color of the pointer's fill -
textAlignmentandtextOrientationboth have the typesTextAlignmentandTextOrientation, respectively. Check the Full Reference for visual examples. -
disableSpinOnClickdisabled the default behaviour of spinning the wheel on clicking it. See this section -
idToLandOnis theidvalue of theitemto land on (Can be fetched from server) -
itemsis an array of of JSON objects that represent thw wheel's segments. Check the Full Reference for more details.
Outputs
-
onSpinStartis called before the wheel spin -
onSpinCompleteis called after the wheel spin
Accessing wheel functions
A 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+.
-
Pass
trueto thedisableSpinOnClickprop to disable spinning when clicking on the wheel. This is optional. -
Add a ref
#wheelto the wheel (any name works):
<ngx-wheel
#wheel
width='600'
height='600'
spinDuration='8'
[disableSpinOnClick]='true'
[items]='items'
[innerRadius]='50'
[spinAmount]='10'
pointerStrokeColor='red'
pointerFillColor='purple'
[idToLandOn]='idToLandOn'
(onSpinStart)='before()'
(onSpinComplete)='after()'
>
</ngx-wheel>
- In your parent component ts file, refer to the wheel using
ViewChild
import { ..., ViewChild, ... } from '@angular/core';
import { NgxWheelComponent } from 'ngx-wheel';
// ...
export class ParentComponent {
@ViewChild(NgxWheelComponent, { static: false }) wheel;
ngAfterViewInit() {
console.log('only after THIS EVENT "wheel" is usable!!');
// Call the spin function whenever and wherever you want after the AfterViewInit Event
this.wheel.spin();
}
reset(){
// Reset allows you to redraw the wheel
// Use it after any change to wheel configurations or to allow re-spinning
this.wheel.reset();
}
}
One 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:
async spin(prize) {
this.idToLandOn = prize
await new Promise(resolve => setTimeout(resolve, 0)); // Wait here for one tick
this.wheel.spin()
}
License
MIT © Ahmed El Sayegh
Sayegh7