Skip to main content

​
Overview

The InputNumber component provides a sophisticated input field specifically designed for numeric values. It includes locale-aware formatting, min/max validation, step controls, and optional spinner buttons.

​
Component Selector

<magary-input-number />

​
Basic Usage

import { Component } from '@angular/core';
import { MagaryInputNumber } from 'ng-magary';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [MagaryInputNumber, FormsModule],
  template: `
    <magary-input-number
      [(ngModel)]="value"
      placeholder="Enter a number"
    />
  `
})
export class DemoComponent {
  value: number | null = null;
}

​
With Spinner Buttons

<magary-input-number
  [(ngModel)]="value"
  [showButtons]="true"
  [step]="1"
  [min]="0"
  [max]="100"
/>

​
Currency Format

<magary-input-number
  [(ngModel)]="price"
  [mode]="'currency'"
  [currency]="'USD'"
  [currencyDisplay]="'symbol'"
  [minFractionDigits]="2"
  [maxFractionDigits]="2"
/>

​
Percentage Format

<magary-input-number
  [(ngModel)]="percentage"
  [mode]="'percent'"
  [minFractionDigits]="2"
/>

​
Properties

​
Value & Model

​
value
number | null
The numeric value (supports two-way binding with [(value)])

​
Formatting Options

​
format
boolean
default:"true"
Whether to format the number according to locale and mode settings
​
mode
'decimal' | 'currency' | 'percent'
default:"'decimal'"
The formatting mode for the number:
  • decimal: Standard number formatting
  • currency: Currency formatting with symbol
  • percent: Percentage formatting
​
locale
string
default:"'en-US'"
The locale to use for number formatting (e.g., ‘en-US’, ‘de-DE’, ‘fr-FR’)
​
localeMatcher
'lookup' | 'best fit'
default:"'best fit'"
The locale matching algorithm to use
​
useGrouping
boolean
default:"true"
Whether to use grouping separators (e.g., thousands separators)
​
minFractionDigits
number
Minimum number of fraction digits to display
​
maxFractionDigits
number
Maximum number of fraction digits to display

​
Currency Options

​
currency
string
default:"'USD'"
The currency code to use when mode is ‘currency’ (e.g., ‘USD’, ‘EUR’, ‘GBP’)
​
currencyDisplay
'symbol' | 'narrowSymbol' | 'code' | 'name'
default:"'symbol'"
How to display the currency:
  • symbol: Use currency symbol ($, €)
  • narrowSymbol: Use narrow symbol
  • code: Use currency code (USD, EUR)
  • name: Use currency name (US Dollar)

​
Prefix & Suffix

​
prefix
string
default:"''"
Text to prepend before the formatted value
​
suffix
string
default:"''"
Text to append after the formatted value

​
Validation

​
min
number | null
default:"null"
Minimum allowed value. Values are clamped to this on blur
​
max
number | null
default:"null"
Maximum allowed value. Values are clamped to this on blur
​
step
number
default:"1"
The step increment/decrement value for spinner buttons and arrow keys
​
allowEmpty
boolean
default:"true"
Whether to allow empty/null values

​
Spinner Buttons

​
showButtons
boolean
default:"false"
Whether to display increment/decrement spinner buttons
​
buttonLayout
'stacked' | 'horizontal' | 'vertical'
default:"'stacked'"
Layout of spinner buttons:
  • stacked: Buttons stacked vertically on the right
  • horizontal: Buttons placed horizontally on both sides
  • vertical: Buttons stacked vertically
​
incrementButtonClass
string
default:"''"
CSS class for the increment button
​
decrementButtonClass
string
default:"''"
CSS class for the decrement button
​
incrementButtonIcon
string
default:"'chevron-up'"
Icon name for the increment button (Lucide icon)
​
decrementButtonIcon
string
default:"'chevron-down'"
Icon name for the decrement button (Lucide icon)

​
Input Configuration

​
placeholder
string
default:"''"
Placeholder text for the input field
​
disabled
boolean
default:"false"
Whether the input is disabled
​
readonly
boolean
default:"false"
Whether the input is read-only
​
size
number | null
The size attribute of the input element
​
maxlength
number | null
Maximum length of the input
​
tabindex
number | null
Tab index of the input element
​
name
string
default:"''"
Name attribute for the input element
​
inputId
string
default:"''"
ID attribute for the input element

​
Styling

​
inputStyle
Record<string, unknown> | null
Inline styles for the input element
​
inputStyleClass
string
default:"''"
CSS class for the input element
​
style
Record<string, unknown> | null
Inline styles for the wrapper element
​
styleClass
string
default:"''"
CSS class for the wrapper element

​
Events

​
onInput
output<Event>
Emitted when the input value changes
​
onFocus
output<FocusEvent>
Emitted when the input receives focus
​
onBlur
output<FocusEvent>
Emitted when the input loses focus. Value is formatted and validated on blur
​
onKeyDown
output<KeyboardEvent>
Emitted on key down events

​
Form Integration

The InputNumber component implements ControlValueAccessor and integrates with Angular forms.

​
Reactive Forms

import { FormControl, ReactiveFormsModule } from '@angular/forms';

quantity = new FormControl<number | null>(0);

<magary-input-number
  [formControl]="quantity"
  [min]="0"
  [max]="100"
/>

​
Keyboard Support

KeyAction
Arrow UpIncrement value by step
Arrow DownDecrement value by step
Backspace / DeleteDelete characters
TabMove focus to next element

​
Complete Example

import { Component } from '@angular/core';
import { MagaryInputNumber } from 'ng-magary';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-input-number-demo',
  standalone: true,
  imports: [MagaryInputNumber, ReactiveFormsModule],
  template: `
    <div class="demo-container">
      <h3>Basic Number</h3>
      <magary-input-number
        [formControl]="quantity"
        [min]="0"
        [max]="100"
        [showButtons]="true"
        placeholder="Enter quantity"
      />

      <h3>Currency</h3>
      <magary-input-number
        [formControl]="price"
        [mode]="'currency'"
        [currency]="'USD'"
        [minFractionDigits]="2"
        [maxFractionDigits]="2"
        placeholder="0.00"
      />

      <h3>Percentage</h3>
      <magary-input-number
        [formControl]="discount"
        [mode]="'percent'"
        [min]="0"
        [max]="1"
        [step]="0.01"
        [minFractionDigits]="2"
      />

      <h3>With Prefix/Suffix</h3>
      <magary-input-number
        [formControl]="weight"
        [prefix]="'Weight: '"
        [suffix]="' kg'"
        [showButtons]="true"
        [step]="0.1"
      />
    </div>
  `
})
export class InputNumberDemoComponent {
  quantity = new FormControl<number | null>(0);
  price = new FormControl<number | null>(null);
  discount = new FormControl<number | null>(0.15);
  weight = new FormControl<number | null>(0);
}

Build docs developers (and LLMs) love

Get started for freeTalk to us