Update demo; add instructions on imperative spin

README.md

@@ -52,6 +52,7 @@ Once your library is imported, you can use its main component, ngx-wheel in your
   width='600'
   height='600'
   spinDuration='8'
+  [disableSpinOnClick]='true'
   [items]='items'
   [innerRadius]='50'
   [spinAmount]='10'
@@ -75,6 +76,7 @@ Once your library is imported, you can use its main component, ngx-wheel in your
 - `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
+- `disableSpinOnClick` disabled the default behaviour of spinning the wheel on clicking it. See
 - `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
@@ -88,6 +90,59 @@ Once your library is imported, you can use its main component, ngx-wheel in your
 - `onSpinStart` is called before the wheel spin
 - `onSpinComplete` is called after the wheel spin
 
+### Spinning With Your Own Button
+
+One common use case that was frequently requested was the ability to spin the wheel on button click. This is easily doable in version 4+.
+
+- Pass `true` to the `disableSpinOnClick` prop to disable spinning when clicking on the wheel. This is optional.
+
+- Add a ref `#wheel` to the wheel (any name works):
+```xml
+<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`
+```typescript
+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();
+   }
+}
+```
+
+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:
+```typescript
+  spin(prize) {
+    this.idToLandOn = prize
+    setTimeout(() => { // Without this timeout, the idToLandOn won't be updated
+      this.wheel.spin()
+    }, 0);
+  }
+```
+
 ## License
 
 MIT © [Ahmed El Sayegh](mailto:[email protected])

projects/ngx-wheel/README.md

@@ -52,6 +52,7 @@ Once your library is imported, you can use its main component, ngx-wheel in your
   width='600'
   height='600'
   spinDuration='8'
+  [disableSpinOnClick]='true'
   [items]='items'
   [innerRadius]='50'
   [spinAmount]='10'
@@ -75,6 +76,7 @@ Once your library is imported, you can use its main component, ngx-wheel in your
 - `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
+- `disableSpinOnClick` disabled the default behaviour of spinning the wheel on clicking it. See
 - `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
@@ -88,6 +90,59 @@ Once your library is imported, you can use its main component, ngx-wheel in your
 - `onSpinStart` is called before the wheel spin
 - `onSpinComplete` is called after the wheel spin
 
+### Spinning With Your Own Button
+
+One common use case that was frequently requested was the ability to spin the wheel on button click. This is easily doable in version 4+.
+
+- Pass `true` to the `disableSpinOnClick` prop to disable spinning when clicking on the wheel. This is optional.
+
+- Add a ref `#wheel` to the wheel (any name works):
+```xml
+<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`
+```typescript
+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();
+   }
+}
+```
+
+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:
+```typescript
+  spin(prize) {
+    this.idToLandOn = prize
+    setTimeout(() => { // Without this timeout, the idToLandOn won't be updated
+      this.wheel.spin()
+    }, 0);
+  }
+```
+
 ## License
 
 MIT © [Ahmed El Sayegh](mailto:[email protected])

projects/ngx-wheel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-wheel",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "peerDependencies": {
     "@angular/common": "^9.1.7",
     "@angular/core": "^9.1.7",

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

@@ -7,7 +7,7 @@ export interface Item {
 @Component({
   selector: 'ngx-wheel',
   template: `
-    <canvas (click)='spin()' id='canvas' [width]='width' [height]='height'>
+    <canvas (click)='!disableSpinOnClick && spin()' id='canvas' [width]='width' [height]='height'>
         Canvas not supported, use another browser.
     </canvas>
 `,
@@ -27,6 +27,7 @@ export class NgxWheelComponent implements OnInit, AfterViewInit {
   @Input() innerRadius: number;
   @Input() pointerStrokeColor: string;
   @Input() pointerFillColor: string;
+  @Input() disableSpinOnClick: boolean;
 
 
   @Output() onSpinStart: EventEmitter<any> = new EventEmitter();

src/app/app.component.html

@@ -1,6 +1,8 @@
 
-<h3>Press the wheel to land on Prize 4</h3>
+<h3>Press the wheel to land on a random prize</h3>
+<h3>Or press the button to land on the corresponding prize</h3>
 <ngx-wheel
+  #wheel
   width='400'
   height='400'
   spinDuration='8'
@@ -12,4 +14,10 @@ <h3>Press the wheel to land on Prize 4</h3>
   [idToLandOn]='idToLandOn'
   (onSpinStart)='before()'
   (onSpinComplete)='after()'
-></ngx-wheel>
+></ngx-wheel>
+<div class="buttons">
+  <button (click)="spin('p1')">Prize 1</button>
+  <button (click)="spin('p2')">Prize 2</button>
+  <button (click)="spin('p3')">Prize 3</button>
+  <button (click)="spin('p4')">Prize 4</button>
+</div>

src/app/app.component.less

@@ -1,3 +1,8 @@
 h3 {
     text-align: center;
+}
+.buttons{
+    width: 400px;
+    display: flex;
+    justify-content: center;
 }

src/app/app.component.ts

@@ -1,18 +1,27 @@
-import { Component, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { NgxWheelComponent } from 'ngx-wheel'
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.less']
 })
 export class AppComponent {
-  constructor(private cdr: ChangeDetectorRef) {
+  @ViewChild(NgxWheelComponent, { static: false }) wheel;
+
+
+  idToLandOn = ['p1', 'p2', 'p3', 'p4'][Math.floor(Math.random() * 4)];
 
-  }
-  idToLandOn = 'p4'
   before() {
     alert('Your wheel is about to spin')
   }
 
+  spin(prize) {
+    this.idToLandOn = prize
+    setTimeout(() => {
+      this.wheel.spin()
+    }, 0);
+  }
+
   after() {
     alert('You have been bamboozled')
   }