ngx-number-spinner v2.2.1

ngx-number-spinner

Index

• About
• Setup
• Documentation
• Issues
• Contributing
• Deploy

About

This is a light-weight Angular 7+ component for adding a number spinner to your project.

• Try out the demo to see it in action!
• Checkout my other Angular project to add a WYSIWYG editor to your project too!
• Visit my website for other cool projects!

Setup

Installation

• For Angular 7:

$ npm install ngx-number-spinner@^1.0.0 --save

• For Angular 8+:

$ npm install ngx-number-spinner --save

Inject

Add NumberPickerModule to AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxNumberSpinnerModule } from 'ngx-number-spinner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxNumberSpinnerModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Documentation

Standalone Examples

export class AppComponent {
    change(value: number): void {
        console.log(value);
    }
}

With validation 'MIN' value (min=1)

<ngx-number-spinner
    [value]="4"
    (change)="change($event)" 
    [min]="1">
</ngx-number-spinner>

With validation 'MAX' value (min=9)

<ngx-number-spinner
    [value]="4"
    (change)="change($event)" 
    [max]="9">
</ngx-number-spinner>

With validation 'MIN' and 'MAX' value (min=1, max=9)

<ngx-number-spinner
    [value]="4"
    (change)="change($event)"
    [min]="1"
    [max]="9">
</ngx-number-spinner>

With 'STEP' (step=5)

<ngx-number-spinner
    (change)="change($event)" 
    [step]="5">
</ngx-number-spinner>

Form Example

import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

export class AppComponent {
    form: FormGroup;
    
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            price: 11
        });
    }
       
    submit() {
        alert(JSON.stringify(this.form.value));
    }
}

<form [formGroup]="form" (submit)="submit()">
    <ngx-number-spinner formControlName="price" [min]="1" [max]="9"></ngx-number-spinner>
    
    <button type="submit">submit</button>
</form>

Component Inputs and Outputs

Issues

If you find any issues feel free to open a request in the Issues tab. If I have the time I will try to solve any issues but cannot make any guarantees. Feel free to contribute yourself.

Contributing

To contribute, clone the repo. Then, run npm install to get the packages needed for the library to work.

Thanks

• mandhu
• jrquick17