Ngx-Wheel: A New Way to Spin the Wheel in Angular

What is ngx-wheel?

ngx-wheel is a simple and easy-to-use Angular component for spinning wheels. With this component, developers can create beautiful and interactive wheels in their Angular applications.

Features

• Fully customizable prize wheel with the ability to set a different number of sections and colors.
• Dynamic section population and text configuration.
• Responsive wheel design based on the container size.
• Compatible with Angular 10+.

Getting Started

Getting started with ngx-wheel is easy. Simply install it using npm:

npm install ngx-wheel --save

Once you have installed the package, you can use the component in your Angular application by importing it into your module:

import {NgxWheelModule} from 'ngx-wheel';

@NgModule({
  imports: [
    NgxWheelModule,
    // ...
  ],
  // ...
})
export class AppModule { }

Usage

To use ngx-wheel, simply add the <ngx-wheel> tag to your HTML code and provide the necessary inputs:

<ngx-wheel [sections]="sections" [colors]="colors" [textConfig]="textConfig" (spinning)="startSpinning()"></ngx-wheel>

Here's an example of how to define the inputs in your component:

export class AppComponent {
  public sections = ['Prize 1', 'Prize 2', 'Prize 3', 'Prize 4', 'Prize 5', 'Prize 6', 'Prize 7', 'Prize 8'];
  public colors = ['#eae56f', '#89f26e', '#7de6ef', '#e7706f', '#eae56f', '#89f26e', '#7de6ef', '#e7706f'];
  public textConfig = {
    fontFamily: 'Arial',
    fontStyle: 'bold',
    fontSize: '20px',
    textAlign: 'center',
    textBaseline: 'middle',
  };

  startSpinning() {
    // ...
  }
}

For more information on how to customize and use ngx-wheel, please refer to the documentation.

Conclusion

ngx-wheel is a powerful and flexible Angular component that allows developers to create beautiful and interactive prize wheels. With its simple and intuitive API, getting started with ngx-wheel is a breeze. Give it a spin today!