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

Angular ≥ 2.x
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

wajdibeltaifa / ng-number-picker