ngx-numeric-counter

Angular component for numeric input with increment and decrement buttons.

✨ 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:

npm install --save ngx-numeric-counter

or with yarn:

yarn add ngx-numeric-counter

⚙️ Basic Usage

Import the Component

If you’re using Angular standalone components:

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:

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

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

✅ Example with Reactive Forms

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:

<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

🔎 Keywords

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