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.
To install this library, run:
$ npm install ngx-wheel --saveThen 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>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>heightis the height of the wheel canvaswidthis the width of the wheel canvasspinDurationis the number of seconds the wheel wil be spinning forspinAmountis the number of spins the wheel will make before stoppinginnerRadiusis the inner radius of the wheel. Allows you to make the wheel hollow from the centerpointerStrokeColoris the color of the pointer's strokepointerFillColoris the color of the pointer's filltextAlignmentandtextOrientationboth have the typesTextAlignmentandTextOrientation, respectively. Check the Full Reference for visual examples.disableSpinOnClickdisabled the default behaviour of spinning the wheel on clicking it. See this sectionidToLandOnis 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.
onSpinStartis called before the wheel spinonSpinCompleteis called after the wheel spin
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()
}MIT © Ahmed El Sayegh
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}