@methrax/spin-wheel

A highly customizable Angular 17+ spin-wheel component built with standalone components, Angular Signals, computed state and CSS design tokens. It has no external runtime dependencies.

Package: npm · License: MIT · Angular: 17+

Features

• Standalone Angular component architecture.
• Signal inputs/outputs and computed state.
• Dynamic sector generation.
• Random spin and spin-to-result APIs.
• Configurable spin duration and complete rotations.
• Custom center pin, sector colors and label colors.
• Consumer-owned theming through CSS custom properties.
• Smooth configurable animation.
• Zero third-party runtime dependencies.

Component architecture

flowchart TD
    INPUTS[Signal Inputs] --> STATE[Computed State]
    STATE --> SLICE[Slice Calculation]
    STATE --> GRADIENT[Gradient Generation]
    STATE --> LABELS[Label Positioning]
    SLICE --> ENGINE[Animation Engine]
    GRADIENT --> VIEW[Wheel View]
    LABELS --> VIEW
    ENGINE --> VIEW
    TOKENS[CSS Design Tokens] --> VIEW
    API[Public Component API] --> ENGINE
    ENGINE --> OUTPUTS[spinStart / spinComplete]

Install

npm install @methrax/spin-wheel