ngx-number-spin

ngx-number-spin

This is an angular number spinner component.

Installation

To install this library (component), run:

$ npm i ngx-number-spin --save

Usage

add NumberPickerModule to AppModule

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

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

// Import this library
import { NgxNumberSpinModule } from 'ngx-number-spin';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    
    // Specify this library as an import
    NgxNumberSpinModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once this library is imported, you can use this component in your Angular application:

Standalone Examples

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

With validation 'MIN' value (min=1)

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

With validation 'MAX' value (min=9)

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

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

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

With 'STEP' (step=5)

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

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-spin formControlName="price" [min]="1" [max]="9"></ngx-number-spin>
    
    <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
(change)	(output) number	no	-	emits the value of the current number, every time the user clicks the - or + button