HelpBot Assistant

How can I help you?

Getting started with Angular NumericTextBox component

11 Feb 202617 minutes to read

This guide demonstrates the steps required to create the NumericTextBox component and demonstrates the basic usage of the NumericTextBox.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion® Angular development? Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion Angular UI Components.

Dependencies

The following list of dependencies are required to use the NumericTextBox component in your application.

|-- @syncfusion/ej2-angular-inputs
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-angular-popups
    |-- @syncfusion/ej2-angular-buttons
    |-- @syncfusion/ej2-angular-splitbuttons
    |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-buttons
        |-- @syncfusion/ej2-splitbuttons

SetUp the Angular application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

  • Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

Note: In Angular 19 and below, it uses app.component.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Installing Syncfusion® NumericTextBox Package

Syncfusion®’s Angular component packages are available on npmjs.com. To use Syncfusion® Angular components, install the necessary package.

This guide uses the Angular NumericTextBox component for demonstration. Add the Angular NumericTextBox component component with:

ng add @syncfusion/ej2-angular-inputs

This command will perform the following configurations:

  • Add the @syncfusion/ej2-angular-inputs package and peer dependencies to your package.json.
  • Import the NumericTextBox component component in your application.
  • Register the default Syncfusion® material theme in angular.json.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion® offers two package structures for Angular components:

  1. Ivy library distribution package format
  2. Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.
    Syncfusion®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute: 
    ng add @syncfusion/ej2-angular-inputs

    For applications not compiled with Ivy, use the ngcc tagged packages:

    The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of IVY compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

    npm add @syncfusion/[email protected]

Adding CSS reference

Syncfusion® Angular component themes can be added in various ways: via CSS or SCSS styles from npm packages, CDN, CRG, or Theme Studio.

The Material theme is added to your styles.css when you run ng add (this happens automatically by default).

To stylize only specific Syncfusion® components, import the necessary styles. For example, to style only the NumericTextBox component:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

Ensure that the import order aligns with the component’s dependency sequence.

For using SCSS styles, refer to this guide.

Adding NumericTextBox component

Use the following snippet in the src/app/app.ts file to import the NumericTextBox component.

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

@Component({
  imports: [
    NumericTextBoxModule,
    FormsModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-numerictextbox value='10'></ejs-numerictextbox>`
})
export class App { }

Note: To reference the combined component styles, use the Custom Resource Generator (CRG) in your application.

Running the application

After completing the configuration required to render a basic NumericTextBox, run the following command to display the output in your default browser.

ng serve

The following example illustrates the output in your browser.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'



import { Component } from '@angular/core';

@Component({
imports: [
        
        NumericTextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component
    template: `<ejs-numerictextbox value='10'></ejs-numerictextbox>`,
})
export class AppComponent {
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Range validation

You can set the minimum and maximum range of values in the NumericTextBox using the min and max properties, so the numeric value should be within the defined range.

The validation behavior depends on the strictMode property.

The following example demonstrates range validation.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'



import { Component, ViewChild } from '@angular/core';

@Component({
imports: [
        
        NumericTextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component
    // sets the minimum and maximum range values
    // strictMode has been enabled by defualt
    template: `
            <ejs-numerictextbox min='10' max='20' value='16' step='2'></ejs-numerictextbox>
            `
})
export class AppComponent {
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Formatting the value

Set the format of the NumericTextBox using the format property. The value is displayed in the specified format when the component is not focused. For more information about formatting, see Formats.

The following example formats the value using the currency format c2.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'



import { Component } from '@angular/core';

@Component({
imports: [
        
        NumericTextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component
    // sets currency with 2 numbers of decimal places format
    template: `
            <ejs-numerictextbox format='c2' value='10'></ejs-numerictextbox>
            `
})
export class AppComponent {
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Precision of numbers

Restrict the number of decimals that can be entered in the NumericTextBox by using the decimals and validateDecimalOnType properties. Values with precision greater than the specified decimals cannot be entered.

  • If validateDecimalOnType is false, the number of decimals is not restricted while typing.
  • Otherwise, decimals are restricted while typing in the NumericTextBox.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'



import { Component } from '@angular/core';

@Component({
imports: [
        
        NumericTextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component
    // restricts number of decimals to be entered in the NumericTextBox by using validateDecimalOnType property
    // sets number of decimal places to be allowed by the NumericTextBox
    template: `
             <div class='wrap'>
               <ejs-numerictextbox [validateDecimalOnType]='true' decimals='3' format='n3' value='10' placeholder='ValidateDecimalOnType Enabled' floatLabelType= 'Auto'></ejs-numerictextbox>
            </div>
            <div class='wrap'>
               <ejs-numerictextbox decimals='3' format='n3' value='10' placeholder='ValidateDecimalOnType Disabled' floatLabelType= 'Auto'></ejs-numerictextbox>
            </div>
            `
})
export class AppComponent {
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Two-way binding

In NumericTextBox, the value property supports two-way binding.
The following example demonstrates two-way binding with the NumericTextBox and an HTML input element.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'



import { Component } from '@angular/core';

@Component({
imports: [
        
        NumericTextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component and
    // input element for checking the two-way binding support using value property
    template: `
     <div class='e-input-group' style='margin-bottom:30px'>
        <ejs-input class='e-input' type='text' [(ngModel)]='value' placeholder='Enter a number'  />
     </div>
    <ejs-numerictextbox [(value)]='value'></ejs-numerictextbox>
    `
})
export class AppComponent {
    value: any;
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Reactive forms

NumericTextBox is a form component, and validation plays a vital role in capturing valid data.
The following example showcases the NumericTextBox with reactive form validation.
For more details about reactive forms, refer to Angular Reactive Forms.

  • To use reactive forms, import ReactiveFormsModule from the @angular/forms package and add it to your NgModule’s imports array. In addition to this, FormGroup, FormControl should be imported to the app component.
  • The FormGroup is used to declare formGroupName for the form. The constructor of this FormGroup then takes an object, that can contain sub-form-groups and FormControls.
  • The FormControl is used to declare formControlName for form controls.

The following example demonstrates how to use reactive forms.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule  } from '@angular/forms'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
imports: [
        FormsModule,ReactiveFormsModule, NumericTextBoxModule, ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    templateUrl: './template.html',
})
export class AppComponent {
    skillForm?: FormGroup | any;
    build: FormBuilder;
    constructor(@Inject(FormBuilder) private builder: FormBuilder) {
        this.build = builder;
        this.createForm();
    }
    createForm() {
        this.skillForm = this.build.group({
          numeric: ['', Validators.required],
          username: ['', Validators.required],
        });
    }
    get username() { return this.skillForm?.get('username'); }
    get numeric() { return this.skillForm?.get('numeric'); }

    onSubmit() {
       alert("You have entered the value: " + this.numeric?.value );
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also