Globalization in Angular Numerictextbox component

26 Feb 20268 minutes to read

Localization

Localization library allows users to localize the default text contents of the NumericTextBox to different cultures using the locale property.
In NumericTextBox, spin buttons title for the tooltip will be localized based on the culture.

Locale key	en-US (default)
incrementTitle	Increment value
decrementTitle	Decrement value

Loading translations

To load translation object in your application use load function of L10n class.

The below example demonstrates the NumericTextBox in German culture with the spin buttons tooltip.

app.component.ts

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, OnInit } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';

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


standalone: true,
    selector: 'app-root',
    // specifies the template string for the DropDownList component with change event
    // sets `German` culture using the culture value 'de'
    template: `<ejs-numerictextbox locale='de' value='10'></ejs-numerictextbox>`
})
export class AppComponent implements OnInit {
    constructor() {
    }
    ngOnInit(): void {
        // Load `German` culture to override spin buttons tooltip text
        L10n.load({
            'de': {
            'numerictextbox': {
                    incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert'
                }
           }
        });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Internationalization

The NumericTextBox uses the Unicode CLDR (Common Locale Data Repository) data for formatting and parsing numbers according to different cultures. By default, the component is configured for English (‘en-US’) culture. To use a different culture, follow the steps below.

• Install the CLDR-Data package by using the below command (it installs the CLDR JSON data). For more information about CLDR-Data, refer to this link.

  npm install cldr-data --save
  

Once the package installed, you can find the culture specific JSON data under the location /node_modules/cldr-data.

• Now import the installed CLDR JSON data into the app.ts file.

• Now import the required culture from the installed location to app.ts file as like the below code snippets.

  declare var require: any;
  
  loadCldr(
        require('cldr-data/main/de/numbers.json'),
        require('cldr-data/main/de/currencies.json'),
        require('cldr-data/supplemental/numberingSystems.json'),
        require('cldr-data/supplemental/currencyData.json')
    );

• Set the culture by using the locale property.

The below example demonstrates the NumericTextBox in German culture with the EUR currency format.

app.component.ts

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



import { Component, OnInit } from '@angular/core';
import { loadCldr,L10n } from '@syncfusion/ej2-base';
// Here we have referred local json files for preview purpose
import * as numberingSystems from './numberingSystems.json';
import * as currencyData from './currencyData.json';
import * as numbers from './numbers.json';
import * as currencies from './currencies.json';

loadCldr(numberingSystems, currencyData, numbers, currencies);

@Component({
imports: [
        NumericTextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the DropDownList component with change event
    // sets `German` culture using the culture value 'de'
    // sets the 'EUR' currency format
    template: `<ejs-numerictextbox locale='de' currency='EUR' format='c2' value='100'></ejs-numerictextbox>`
})
export class AppComponent implements OnInit {
    constructor() {
    }
    ngOnInit(): void {
        // Load `German` culture to override spin buttons tooltip text
        L10n.load({
            'de': {
            'numerictextbox': {
                    incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert'
                }
           }
        });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Right-to-left (RTL)

The NumericTextBox supports right-to-left (RTL) rendering, improving the user experience and accessibility for languages written right-to-left (Arabic, Persian, Urdu, etc.). To enable RTL mode, set the enableRtl property to true.

app.component.ts

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



import { Component, OnInit } from '@angular/core';
import { loadCldr,L10n } from '@syncfusion/ej2-base';

@Component({
imports: [
         NumericTextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the DropDownList component with change event
    // sets `German` culture using the culture value 'de'
    // sets the 'EUR' currency format
    template: `<ejs-numerictextbox locale='ar-AE' placeholder='أدخل القيمة' floatLabelType='Auto' enableRtl='true' value='100'></ejs-numerictextbox>`
})
export class AppComponent implements onInit {
    constructor() {
    }
    ngOnInit(): void {
        // Load `German` culture to override spin buttons tooltip text
        L10n.load({
            'ar-AE': {
            'numerictextbox': {
                    incrementTitle: 'قيمة الزيادة', decrementTitle: 'قيمة تناقص'
                }
           }
        });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));