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 |