Skip to content
Angular (6+) prize winning wheel
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 863accd Jan 17, 2019

README.MD

ngx-wheel

npm version npm

ng-wheel is an open-source angular (2+) 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.

ngx-wheel

Installation

To install this library, run:

$ npm install ngx-wheel --save

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
    stroke="#F3D583"
    [strokeWidth]="4"
    [spinOnce]="spinOnce"
    fontColor="white"
    arrowColor="white"
    [spinRange]="[10,5]"
    [centerText]="merchant"
    [prizeToWin]="prizeToWin"
    [prize_descriptions]="prizes"
    [colors]="colors"
    (beforeSpin)="beforeSpinFn()"
    (afterSpin)="afterSpinFn()">
</ngx-wheel>

Options

Inputs

  • arrowColor is a string representing the color of the arrow of the wheel
  • centerText is the text that appears in the center of the wheel
  • spinOnce allows one spin only
  • fontColor is a string representing the color of the text on the wheel
  • stroke is a string representing the color of the border between wheel segments.
  • strokeWidth is a number representing the width of the border between wheel segments.
  • prizeToWin is a string that represents the prize to land on (Can be fetched from server)
  • prize_descriptions is an array of strings that represents the prizes
  • colors is an array of strings that represents the colors of the background of each corresponding prize
  • spinRange is an array of two numbers. The first is the minimum number of spins the wheel will make. The second is the maximum number of spins. The wheel will always do a random number of spins between this range.

Outputs

  • beforeSpin is called before the wheel spin
  • afterSpin is called after the wheel spin

Mobile

There is another component that creates a wheel that fits on mobile screens called ngx-mobile-wheel which can be used just like the original wheel.

<ngx-mobile-wheel
    stroke="#F3D583"
    [strokeWidth]="4"
    [spinOnce]="spinOnce"
    fontColor="white"
    arrowColor="white"
    [spinRange]="[10,5]"
    [centerText]="merchant"
    [prizeToWin]="prizeToWin"
    [prize_descriptions]="prizes"
    [colors]="colors"
    (beforeSpin)="beforeSpinFn()"
    (afterSpin)="afterSpinFn()">
</ngx-mobile-wheel>

License

MIT © Ahmed El Sayegh

You can’t perform that action at this time.