How to use Winwheel.js in ionic 4

Ionic Framework
1

Hello!

i’m new to ionic framework…
How can i implement Winwheel.js within my ionic app.

Thanks!

2

No one is going to help you if you don’t do the minimum required first.

Show your code so far, where you’ve got to etc.

We are not going to do your job for you, but we will try to help.

3

I have install javascript-winwheel

npm install winwheel --save

In my home.page.html i have added canvas

<canvas id='canvas' width='880' height='300'>
     Canvas not supported, use another browser.
</canvas>

In home.page.ts :

import { Component } from '@angular/core';
import Winwheel from 'winwheel';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  theWheel: any;
  constructor() {
    this.theWheel = new Winwheel({
      numSegments: 8, // Number of segments
      outerRadius: 212, // The size of the wheel.
      centerX: 217, // Used to position on the background correctly.
      centerY: 219,
      textFontSize: 28, // Font size.
      // Definition of all the segments.
      segments: [
        { fillStyle: '#eae56f', text: 'Prize 1' },
        { fillStyle: '#89f26e', text: 'Prize 2' },
        { fillStyle: '#7de6ef', text: 'Prize 3' },
        { fillStyle: '#e7706f', text: 'Prize 4' },
        { fillStyle: '#eae56f', text: 'Prize 5' },
        { fillStyle: '#89f26e', text: 'Prize 6' },
        { fillStyle: '#7de6ef', text: 'Prize 7' },
        { fillStyle: '#e7706f', text: 'Prize 8' },
      ],
      // Definition of the animation
      animation: {
        type: 'spinToStop',
        duration: 5,
        spins: 8,
        callbackFinished: this.alertPrize(),
      },
    });
  }
  alertPrize() {
    // Do basic alert of the segment text.
    alert('You have won ');
  }
}

Doing this Example

But wheel is not displaying

Untitled
Untitled1600×900 77 KB

4

I hate to simply bring bad news without much in the way of concrete suggestions, but at first glance this looks to me like a rather challenging problem, especially for somebody new to Angular.

According to this issue, the version you installed via npm isn’t even usable. There is this PR purporting to make it usable from Angular, but not in a very idiomatic way and not accepted.

My advice would be to look for alternative libraries, with a focus on ones that provide Angular support out of the box.

5

@rapropos is correct with regards to that Issue mentioned. However, there is nothing stopping you using this library in an ionic app.

Simply include the script in your index.html file instead (direct from GitHub download) and forget Angular.

You can still hook up whatever you need with eventlisteners etc but that is a different topic.