<!DOCTYPE html>
<html>
<head>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="src/main.js"></script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
# ng-number-picker
[](https://travis-ci.org/wajdibeltaifa/ng-number-picker)
[](http://www.opensource.org/licenses/MIT)
[](https://www.npmjs.com/package/ng-number-picker)
[](https://www.npmjs.com/package/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](https://embed.plnkr.co/JUEIfo/)
## Requirements
1. `Angular` ≥ `2.x`
1. `Bootstrap` ≥ `4.x`
## Installation
Run `npm install --save ng-number-picker` from the command line, then import the `NgNumberPickerModule` into your `appModule` :
```javascript
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:
```javascript
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
...
```
## Usage
Add the following line into your html template :
```html
<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](https://github.com/wajdibeltaifa/ng-number-picker/blob/cf3d0ec9d2f1ac1d94ebd2107df406d50dd988bc/src/lib/number-picker.config.ts#L4). |
| `buttonsOrientation` | `buttonsOrientationType` | `h` | The orientation strategy for up/down buttons. Please take a look at [the available orientation types](https://github.com/wajdibeltaifa/ng-number-picker/blob/cf3d0ec9d2f1ac1d94ebd2107df406d50dd988bc/src/lib/number-picker.config.ts#L3).|
| `customClass` | `CustomClasses` | `{}` | Set custom css classes around the component. Please take a look at [the available custom classes options](https://github.com/wajdibeltaifa/ng-number-picker/blob/cf3d0ec9d2f1ac1d94ebd2107df406d50dd988bc/src/lib/number-picker.config.ts#L6).| |
| `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:
```javascript
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 |
// Shim the environment
import 'core-js/client/shim';
// Angular requires Zones to be pre-configured in the environment
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';
//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.js';
platformBrowserDynamic().bootstrapModule(AppModule);
//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {NumberPickerModule} from 'ng-number-picker';
@Component({
selector: 'my-app',
template: `
<div class="text-center">
<h2>Ng number picker</h2>
<p>A number picker input for angular 2+ & bootstrap 4+. It supports the mousewheel, the up/down keys and increase/decrease input value continuously by long tap the up/down buttons.</p>
</div>
<div class="row justify-content-center">
<div class="col-6 pt-5">
<ng-number-picker
[(value)]="value"
[min]="'50'"
[max]="'150'"
[step]="'10'"
[pickStartAfter]="'500'"
[pickTimer]="'100'"
[prefix]="'cost'"
[postfix]="'$'"
[buttonsOrientation]="'h'"
[size]="'md'"
[showDownButton]="true"
[showUpButton]="true"
[inputReadOnly]="false"
[mouseWheel]="true"
[arrowKeys]="true"
[placeholder]="'How much'"
[customClass]="{'container': '', 'up': '', 'down': '', 'prefix': '', 'postfix': ''}"
(minReached)="onMinReached($event)"
(maxReached)="onMaxReached($event)"
(pickStarted)="onPickStarted($event)"
(pickStoped)="onPickStoped($event)"
(pickUpStarted)="onPickUpStarted($event)"
(pickDownStarted)="onPickDownStarted($event)"
(pickUpStoped)="onPickUpStoped($event)"
(pickDownStoped)="onPickDownStoped($event)"
></ng-number-picker>
</div>
</div>
`,
})
export class App {
constructor() {
}
onMaxReached(event) {
console.log('onMaxReached');
}
onMinReached(event) {
console.log('onMinReached');
}
onPickStarted(event) {
console.log('onPickStarted');
}
onPickStoped(event) {
console.log('onPickStoped');
}
onPickUpStarted(event) {
console.log('onPickUpStarted');
}
onPickDownStarted(event) {
console.log('onPickDownStarted');
}
onPickUpStoped(event) {
console.log('onPickUpStoped');
}
onPickDownStoped(event) {
console.log('onPickDownStoped');
}
}
@NgModule({
imports: [BrowserModule, NumberPickerModule],
declarations: [App],
bootstrap: [App],
})
export class AppModule {}
{
"name": "@plnkr/starter-angular",
"version": "1.0.0",
"description": "Angular starter template",
"dependencies": {
"@angular/common": "^5.2.4",
"@angular/compiler": "^5.2.4",
"@angular/forms": "^5.2.4",
"@angular/core": "^5.2.4",
"@angular/platform-browser": "^5.2.4",
"@angular/platform-browser-dynamic": "^5.2.4",
"core-js": "^2.5.3",
"rxjs": "^5.5.6",
"zone.js": "^0.8.20",
"ng-number-picker": "^1.1.6"
},
"plnkr": {
"runtime": "system"
}
}