Installation & Quick Start

1. Install

npm install @methrax/spin-wheel

2. Import the standalone component

import { Component } from "@angular/core";
import { MethraxSpinWheel, WheelSector } from "@methrax/spin-wheel";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [MethraxSpinWheel],
  templateUrl: "./example.component.html",
})
export class ExampleComponent {
  wheelSectors: WheelSector[] = [
    { id: 1, label: "Prize 1", color: "#ef4444" },
    { id: 2, label: "Prize 2", color: "#22c55e" },
    { id: 3, label: "Prize 3", color: "#3b82f6" },
    { id: 4, label: "Prize 4", color: "#eab308" },
  ];

  onSpinComplete(result: WheelSector) {
    console.log("Winner:", result);
  }
}

3. Render the wheel

<m-spin-wheel
  [sectors]="wheelSectors"
  [numberOfSpinnings]="5"
  [spinDuration]="4000"
  [showCenterPin]="true"
  centerPinLabel="SPIN"
  (spinStart)="onSpinStart()"
  (spinComplete)="onSpinComplete($event)"
>
</m-spin-wheel>

4. Trigger a random spin

Use ViewChild when the application owns the spin control.

import { ViewChild } from '@angular/core';
import { MethraxSpinWheel } from '@methrax/spin-wheel';

@ViewChild(MethraxSpinWheel)
wheel!: MethraxSpinWheel;

spinRandom() {
  this.wheel.spinRandom();
}

5. Spin to a known result

spinWinner() {
  this.wheel.spinToResult(2);
}

The wheel animates and stops on the sector matching the provided sector ID.