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!
• 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

---

Attribute	Type	Required	Default	Description
value	[input] number	No	0	initial value for the spinner
min	[input] number	No	null	limit the minimal number
max	[input] number	No	null	limit the maximum number
spin	[input] number	No	1	increment or decrement by current number
vertical	[input] vertical	horizontal	No	horizontal
(change)	(output) number	no	-	emits the value of the current number, every time the user clicks the - or + button

---

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