ng-number-picker

A number picker input for angular 2+ & bootstrap 4+. It supports the mousewheel and the up/down keys and increase/decrease input value continuously by long tap the up/down buttons.

Getting Started

These instructions will get you an copy of the ng-number-picker module up and running on your local machine for development purposes. See Options & Events for more details.

Try it

Try it on: Plunker or stackblitz

Requirements

1. Angular ≥ 2.x
2. Bootstrap ≥ 4.x

Installation

Run npm install --save ng-number-picker from the command line, then import the NgNumberPickerModule into your appModule :

import {NumberPickerModule} from 'ng-number-picker';

@NgModule({
  imports: [
    NumberPickerModule
  ],
  ...
  ...
})

Run npm install --save bootstrap from the command line to install Bootstrap ≥ 4.x, then include the style into your angular.json file (or angular-cli.json for angular version < 6.0) similar to the following:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
...

Usage

Add the following line into your html template :

<ng-number-picker [(value)]="value"></ng-number-picker>

Options

The following options are the available component inputs :

INPUT	TYPE	DEFAULT	DISCRIPTION
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	The step value for up/down change
value	number	null	Initial input value
pickStartAfter	number	500	The time in milliseconds before start picking values. Used when holding click on up/down buttons.
pickTimer	number	100	The time in milliseconds for step auto incrementation/decrementation. Used when holding click on up/down buttons.
prefix	string	null	Text value before the input
postfix	string	null	Text value after the input
placeholder	string	null	Input placeholder
size	sizeType	md	The input size. Please take a look at the available size types.
buttonsOrientation	buttonsOrientationType	h	The orientation strategy for up/down buttons. Please take a look at the available orientation types.
customClass	CustomClasses	{}	Set custom css classes around the component. Please take a look at the available custom classes options.
mouseWheel	boolean	false	Enable/disable change input value with mouseWheel
arrowKeys	boolean	true	Enable/disable change input value with up/down arrow keys
inputReadOnly	boolean	false	Readonly input
showUpButton	boolean	true	Show/hide upward button
showDownButton	boolean	true	Show/hide downword button

Default options

You can change the default options values exist in the NumberPickerService by creating a CustomNumberPickerService similar to the following:

import {NumberPickerModule, NumberPickerService} from 'dist/number-picker';

export class CustomNumberPickerService {
  min = 10;
  max = 50;
  step = 5;
  precision = 1;
  pickStartAfter = 100;
  pickTimer = 100;
  value = 15;
}

@NgModule({
  imports: [
    NumberPickerModule
  ],
  providers: [{provide: NumberPickerService, useClass: CustomNumberPickerService}],
  ...
  ...
  ...
})

Events

Triggered events

The following events are triggered on the input and can be listened on.

EVENT	DISCRIPTION
valueChange	Triggered when the value is changed with one of the +/- buttons
minReached	Triggered when the input value hit the limit set by the min option
maxReached	Triggered when the input value hit the limit set by the max option
pickStarted	Triggered when start picking numbers upwards or downwards
pickStoped	Triggered when stop picking numbers upwards or downwards
pickUpStarted	Triggered when start picking numbers upwards
pickUpStoped	Triggered when stop picking numbers upwards
pickDownStarted	Triggered when start picking numbers downwards
pickDownStoped	Triggered when stop picking numbers downwards