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:

1npm install --save ngx-numeric-counter

or with yarn:

1yarn add ngx-numeric-counter

⚙️ Basic Usage

Import the Component

If you’re using Angular standalone components:

1import { Component } from '@angular/core';
2import { NgxNumericCounterComponent } from 'ngx-numeric-counter';
3
4@Component({
5  standalone: true,
6  imports: [NgxNumericCounterComponent],
7  template: `
8    <ngx-numeric-counter
9      [(ngModel)]="quantity"
10      [min]="1"
11      [max]="10"
12      [step]="1"
13    ></ngx-numeric-counter>
14
15    <p>Quantity: {{ quantity }}</p>
16  `
17})
18export class DemoComponent {
19  quantity = 3;
20}

Or import the module in your NgModule:

1import { NgxNumericCounterModule } from 'ngx-numeric-counter';
2
3@NgModule({
4  imports: [NgxNumericCounterModule],
5})
6export class AppModule {}

✅ Example with Reactive Forms

1import { Component } from '@angular/core';
2import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
3import { NumericCounterComponent } from 'ngx-numeric-counter';
4
5@Component({
6  standalone: true,
7  imports: [ReactiveFormsModule, NumericCounterComponent],
8  template: `
9    <form [formGroup]="form">
10      <ngx-numeric-counter
11        formControlName="quantity"
12        [min]="1"
13        [max]="10"
14      ></ngx-numeric-counter>
15    </form>
16
17    <p>Value: {{ form.value | json }}</p>
18  `
19})
20export class DemoReactiveComponent {
21  form: FormGroup;
22
23  constructor(private fb: FormBuilder) {
24    this.form = this.fb.group({
25      quantity: [5]
26    });
27  }
28}

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

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