ngx-numeric-counter/README.md

Angular component for numeric input with increment and decrement buttons.

# ngx-numeric-counter

> Angular component for numeric input with increment and decrement buttons.

[![npm version](https://img.shields.io/npm/v/ngx-numeric-counter.svg)](https://www.npmjs.com/package/ngx-numeric-counter)
[![Downloads](https://img.shields.io/npm/dw/ngx-numeric-counter.svg)](https://www.npmjs.com/package/ngx-numeric-counter)
 
---

## ✨ Major Features

✅ Increment and decrement buttons  
✅ Works with [(ngModel)] and Reactive Forms  
✅ Configurable min, max, and step  
✅ Works in standalone components and NgModules  
✅ Lightweight and no dependencies  

---

## 🚀 Installation

Install the package via npm:

```bash
npm install --save ngx-numeric-counter
```

or with yarn:

```bash
yarn add ngx-numeric-counter
```

##  ⚙️ Basic Usage
### Import the Component

If you’re using Angular standalone components:

```typescript
import { Component } from '@angular/core';
import { NgxNumericCounterComponent } from 'ngx-numeric-counter';

@Component({
  standalone: true,
  imports: [NgxNumericCounterComponent],
  template: `
    <ngx-numeric-counter
      [(ngModel)]="quantity"
      [min]="1"
      [max]="10"
      [step]="1"
    ></ngx-numeric-counter>

    <p>Quantity: {{ quantity }}</p>
  `
})
export class DemoComponent {
  quantity = 3;
}
```

Or import the module in your NgModule:

```typescript
import { NgxNumericCounterModule } from 'ngx-numeric-counter';

@NgModule({
  imports: [NgxNumericCounterModule],
})
export class AppModule {}
```

##  ✅ Example with Reactive Forms
 
```typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { NumericCounterComponent } from 'ngx-numeric-counter';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, NumericCounterComponent],
  template: `
    <form [formGroup]="form">
      <ngx-numeric-counter
        formControlName="quantity"
        [min]="1"
        [max]="10"
      ></ngx-numeric-counter>
    </form>

    <p>Value: {{ form.value | json }}</p>
  `
})
export class DemoReactiveComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      quantity: [5]
    });
  }
}
```
 

## 🔧 Configuration Options
### You can pass individual inputs to customize the behavior:

| Property         | Type      | Default                    | Description                                     |  
|------------------|-----------|----------------------------|-------------------------------------------------|  
| `min`            | `number`  | `Number.NEGATIVE_INFINITY` | Minimum value allowed.                          |  
| `max`            | `number`  | `Number.POSITIVE_INFINITY` | Maximum value allowed.                          |  
| `step`           | `number`  | `1`                        | Increment/decrement step value.                 |  
| `disabled`       | `boolean` | `false`                    | Disables the input and the buttons.             |  
| `buttonClass`    | `string`  | `''`                       | Additional CSS classes for the increment/decrement buttons. |  
| `inputClass`     | `string`  | `''`                       | Additional CSS classes for the input field.     |  
| `containerClass` | `string`  | `''`                       | Additional CSS classes for the entire component wrapper. |  

 
### ✅ Example: Tailwind CSS

Here’s how to style the counter with Tailwind:

```html
<ngx-numeric-counter
  [(ngModel)]="qty"
  [buttonClass]="'bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600'"
  [inputClass]="'border border-gray-300 w-16 text-center text-lg rounded'"
  [containerClass]="'flex gap-2 items-center'"
></ngx-numeric-counter>
```



## 🎯 Compatibility
Angular 17+

Modern browsers



## 📦 License
MIT © 2025



---

## ☕ Buy Me a Coffee

If you find this library helpful, you can support my work:

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://buymeacoffee.com/leonardomatiz)

👉 [Buy Me a Coffee](https://buymeacoffee.com/leonardomatiz)






## 🔎 Keywords
angular, ngx, numeric counter, number input, counter input, stepper, angular standalone, angular forms, ngmodule, reactive forms