Implementing Syncfusion Angular NumericTextBox

Component Overview

• Numeric validation with min/max ranges and strict mode
• Formatting (currency, percentage, decimals)
• Spin buttons for value adjustment
• Adornments (prepend/append templates for icons, labels)
• Accessibility (WCAG 2.2, ARIA, keyboard navigation)
• Localization (multiple cultures and RTL support)
• Form integration (reactive forms, template-driven forms)

Documentation and Navigation Guide

Getting Started

• Installation and package setup
• Angular 21+ standalone component setup
• Basic NumericTextBox implementation
• CSS imports and theme configuration
• Range validation with min/max
• Simple formatting example
• Precision and decimals control
• Two-way binding setup
• Reactive forms integration

Formats and Number Styling

• Standard formats (currency

  c2

  , percentage

  p

  , numbers

  n

  )
• Custom numeric format strings
• Decimal place control
• Currency symbols and localization
• Styling NumericTextBox wrapper and icons
• CSS customization patterns

Spinners and Step Control

• Spin button visibility (

  showSpinButton

  )
• Step value configuration (

  step

  property)
• Customizing spin up/down arrow icons
• Arrow key interactions
• Disabling spin buttons

Adornments and Templates

• Adding prefix/suffix with

  prependTemplate

  and

  appendTemplate

• Currency symbols and unit labels
• Action buttons and icons
• Status indicators without affecting validation
• Template usage patterns

Validation and Form Integration

• Range validation (min/max with strictMode)
• Custom validation rules
• Error and warning states
• Reactive forms patterns

Advanced Patterns and Edge Cases

• Maintaining trailing zeros on focus
• Preventing nullable input (always require a value)
• Nullable input configuration
• Clear button behavior
• Read-only and disabled states
• Focus and blur event handling
• Float label types (Always, Auto, Never)
• Performance optimization

Accessibility and Migration

• WCAG 2.2 Level AA compliance
• ARIA attributes (spinbutton role, aria-valuemin, aria-valuemax, etc.)
• Keyboard navigation (Arrow Up/Down)
• Screen reader support
• RTL support for right-to-left languages
• EJ1 to EJ2 API migration guide
• Localization and globalization

Globalization and Localization

• Locale property configuration
• Culture-specific number formatting
• RTL (right-to-left) support
• International number formats

API Reference

• All component properties with types, defaults, and descriptions
• All public methods with signatures and usage examples
• All events with argument interface details

• ChangeEventArgs

  ,

  NumericBlurEventArgs

  ,

  NumericFocusEventArgs

  interfaces
• Complete summary tables for quick lookup

Quick Start Example

import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [NumericTextBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-numerictextbox
      value="100"
      min="10"
      max="1000"
      step="5"
      format="c2"
      placeholder="Enter amount">
    </ejs-numerictextbox>
  `
})
export class AppComponent {}

Common Patterns

Currency Input with Validation

<ejs-numerictextbox
  value="50.00"
  format="c2"
  currency="USD"
  min="0"
  max="10000"
  decimals="2"
  strictMode="true">
</ejs-numerictextbox>

Percentage Input

<ejs-numerictextbox
  value="25"
  format="p"
  min="0"
  max="100"
  step="1">
</ejs-numerictextbox>

With Adornments (Unit Label)

<ejs-numerictextbox
  value="100"
  [appendTemplate]="appendUnit">
</ejs-numerictextbox>

<ng-template #appendUnit>
  <span class="unit-label">kg</span>
</ng-template>

Two-Way Binding with Form Control

<ejs-numerictextbox
  [(ngModel)]="quantity"
  min="1"
  max="100"
  step="1">
</ejs-numerictextbox>

Key Properties

value

null

min

Number.MIN_VALUE

max

Number.MAX_VALUE

step

1

decimals

null

format

null

currency

null

strictMode

false

showSpinButton

true

showClearButton

false

readonly

false

disabled

false

locale

'en-US'

enableRtl

false

placeholder

null

floatLabelType

'Never'

Common Use Cases

1. E-Commerce Quantity Input — Product quantity selector with min/max validation
2. Financial Forms — Currency input with currency symbol and decimal places
3. Scientific Applications — High-precision decimal inputs
4. Survey/Form Data — Percentage inputs with 0-100 range
5. Multi-Language Support — Numbers formatted per user locale
6. Accessibility-First Forms — WCAG-compliant numeric inputs
7. Mobile-Friendly — Touch-friendly spin buttons and keyboard input

See Also

• Syncfusion Angular Input Controls
• Angular Forms Documentation
• WCAG 2.2 Accessibility Guidelines
• Syncfusion Theme Studio