# ngx-number-spin

> An Angular number spin component

Latest version **0.0.4** (published 2019-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-number-spin
pnpm add ngx-number-spin
yarn add ngx-number-spin
bun add ngx-number-spin
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2019-03-20 |
| First published | 2019-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 67.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mandhu |
| Maintainers | mandhu |
| Keywords | ng, ngx, angular, number, spin, ngx-number-spin, angular number spin component |

## Links

- npm: https://www.npmjs.com/package/ngx-number-spin
- Repository: https://github.com/mandhu/ngx-number-spin
- Homepage: https://github.com/mandhu/ngx-number-spin#readme
- Issues: https://github.com/mandhu/ngx-number-spin/issues
- npm.io page: https://npm.io/package/ngx-number-spin

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.0.4 (latest) — 2019-03-20
- 0.0.3 — 2019-03-20
- 0.0.2 — 2019-03-20
- 0.0.1 — 2019-03-20

## README

# ngx-number-spin

This is an angular number spinner component.

## Installation

To install this library (component), run:
```bash
$ npm i ngx-number-spin --save
```

## Usage
add NumberPickerModule to `AppModule`

```typescript
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

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

##### With validation 'MIN' value (min=1)
```html
<ngx-number-spin
    [value]="4"
    (change)="change($event)" 
    [min]="1">
</ngx-number-spin>
```

##### With validation 'MAX' value (min=9)
```html
<ngx-number-spin 
    [value]="4"
    (change)="change($event)" 
    [max]="9">
</ngx-number-spin>
```

##### With validation 'MIN' and 'MAX' value (min=1, max=9)
```html
<ngx-number-spin 
    [value]="4"
    (change)="change($event)"
    [min]="1"
    [max]="9">
</ngx-number-spin>
```

##### With 'STEP' (step=5)
```html
<ngx-number-spin
    (change)="change($event)" 
    [step]="5">
</ngx-number-spin>
```
--------------------------------------------------------------------------------------------------------------------
### Form Example
```typescript
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));
    }
}
```

```html
<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 |


-------------------------------------------------------------------------------------------------------

![ngx-number-spin example image](/src/assets/images/example.png "ngx-number-spin example image")

---
_Source: https://npm.io/package/ngx-number-spin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._