Added pointer customization

README.md

@@ -47,14 +47,18 @@ Once your library is imported, you can use its main component, ngx-wheel in your
 
 ```xml
 <ngx-wheel
-  width='400'
-  height='400'
+  width='600'
+  height='600'
   spinDuration='8'
   [items]='items'
+  [innerRadius]='50'
+  [spinAmount]='10'
+  pointerStrokeColor='red'
+  pointerFillColor='purple'
   [idToLandOn]='idToLandOn'
   (onSpinStart)='before()'
   (onSpinComplete)='after()'
->
+></ngx-wheel>>
 </ngx-wheel>
 ```
 
@@ -65,6 +69,10 @@ Once your library is imported, you can use its main component, ngx-wheel in your
 - `height` is the height of the wheel canvas
 - `width` is the width of the wheel canvas
 - `spinDuration` is the number of seconds the wheel wil 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
 - `idToLandOn` is the `id` value of the `item` to land on (Can be fetched from server)
 - `items` is an array of segments which have the following format:
 ```javascript
@@ -74,11 +82,10 @@ Once your library is imported, you can use its main component, ngx-wheel in your
   "id": "p1", // id of prize (can be any type)
 }
 ```
-- `onSpinStart` and `onSpinComplete` are hooks. The passed functions will be called before the spin and after the spin completes.
-
+- 
 #### Outputs
-- `beforeSpin` is called before the wheel spin
-- `afterSpin` is called after the wheel spin
+- `onSpinStart` is called before the wheel spin
+- `onSpinComplete` is called after the wheel spin
 
 ## License
 

projects/ngx-wheel/src/lib/ngx-wheel.component.ts

@@ -23,6 +23,10 @@ export class NgxWheelComponent implements OnInit, AfterViewInit {
   @Input() width: number;
   @Input() items: Item[];
   @Input() spinDuration: number;
+  @Input() spinAmount: number;
+  @Input() innerRadius: number;
+  @Input() pointerStrokeColor: string;
+  @Input() pointerFillColor: string;
 
 
   @Output() onSpinStart: EventEmitter<any> = new EventEmitter();
@@ -53,13 +57,14 @@ export class NgxWheelComponent implements OnInit, AfterViewInit {
     this.wheel = new Winwheel({
       numSegments: segments.length,
       segments,
+      innerRadius: this.innerRadius || 0,
       outerRadius: (this.height / 2) - 20,
       centerY: (this.height / 2) + 20,
       animation:
       {
         type: 'spinToStop',  // Type of animation.
         duration: this.spinDuration, // How long the animation is to take in seconds.
-        spins: 8  // The number of complete 360 degree rotations the wheel is to do.
+        spins: this.spinAmount  // The number of complete 360 degree rotations the wheel is to do.
       }
     })
     // @ts-ignore
@@ -77,8 +82,8 @@ export class NgxWheelComponent implements OnInit, AfterViewInit {
     if (c) {
       c.save();
       c.lineWidth = 2;
-      c.strokeStyle = 'black';
-      c.fillStyle = 'black';
+      c.strokeStyle = this.pointerStrokeColor;
+      c.fillStyle = this.pointerFillColor;
       c.beginPath();
       c.moveTo((this.width / 2) - 20, 0);
       c.lineTo((this.width / 2) + 20, 0);

src/app/app.component.html

@@ -3,6 +3,10 @@
   height='600'
   spinDuration='8'
   [items]='items'
+  [innerRadius]='50'
+  [spinAmount]='10'
+  pointerStrokeColor='red'
+  pointerFillColor='purple'
   [idToLandOn]='idToLandOn'
   (onSpinStart)='before()'
   (onSpinComplete)='after()'