Globalization in EJ2 TypeScript Numerictextbox control
29 Aug 202312 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.
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { L10n } from '@syncfusion/ej2-base';
// Load `German` culture to override spin buttons tooltip text
L10n.load({
'de': {
'numerictextbox': {
incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert'
}
},
});
let numeric: NumericTextBox = new NumericTextBox({
// sets `German` culture using the culture value 'de'
locale: 'de',
// sets value to the NumericTextBox
value: 10
});
// renders initialized NumericTextBox
numeric.appendTo('#numeric');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 NumericTextBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript NumericTextBox Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<input id="numeric" type="text" />
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 240px;
padding-top:100px;
}
Internationalization
Internationalization library provides support for formatting and parsing the number by using the official Unicode CLDR JSON data and also provides the loadCldr
method to load the culture specific CLDR JSON data. The NumericTextBox comes with built-in
internationalization support to adapt based on culture. For more information about internationalization, refer to this link.
By default, all the Essential JS 2 component are specific to English culture (‘en-US’). If you want to go with the different culture other than English
, follow the below steps.
- 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. To import JSON data we need to install the JSON plugin loader. Here we have used the SystemJS JSON plugin loader.
npm install systemjs-plugin-json --save-dev
- Once installed, configure the
system.config.js
configuration settings as like below to map thesystemjs-plugin-json
loader.
System.config({
paths: {
'syncfusion:': 'npm:@syncfusion/'
},
map: {
app: 'app',
//Syncfusion packages mapping
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"cldr-data": 'npm:cldr-data',
"plugin-json": "npm:systemjs-plugin-json/json.js"
},
meta: {
'*.json': { loader: 'plugin-json' }
},
packages: {
'app': { main: 'app', defaultExtension: 'js' },
'cldr-data': { main: 'index.js', defaultExtension: 'js' }
}
});
System.import('app');
- 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.
import { NumericTextBox } from '@syncfusion/ej2-inputs';
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);
L10n.load({
'de': {
'numerictextbox': { incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert'}
}
});
let currency: NumericTextBox = new NumericTextBox({
// sets `German` culture using the culture value 'de'
locale: 'de',
// sets the 'EUR' currency format
currency: 'EUR',
format: 'c2',
value: 100,
});
currency.appendTo('#numeric');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 NumericTextBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript NumericTextBox Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<input id="numeric" type="text" />
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 240px;
padding-top: 100px;
}
Right to Left(RTL)
RTL provides an option to switch the text direction and layout of the NumericTextBox component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL NumericTextBox, set the enableRtl
to true.
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { loadCldr,L10n } from '@syncfusion/ej2-base';
L10n.load({
'ar-AE': {
'numerictextbox': { incrementTitle: 'قيمة الزيادة', decrementTitle: 'قيمة تناقص'}
}
});
let currency: NumericTextBox = new NumericTextBox({
// sets `Arabic` culture using the culture value 'ar-AE'
locale: 'ar-AE',
value: 100,
placeholder: 'أدخل القيمة',
enableRtl: true,
floatLabelType: 'Auto'
});
currency.appendTo('#numeric');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 NumericTextBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript NumericTextBox Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<input id="numeric" type="text" />
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 240px;
padding-top: 100px;
}