Internationalization

2 Feb 202624 minutes to read

The Syncfusion^® Internationalization library provides powerful tools for formatting and parsing date and number objects, using the official Unicode CLDR JSON data. By default, the en-US locale and USD currency code are preset for all Syncfusion^® Angular UI Components.

Loading CLDR-JSON Data

Syncfusion^® CLDR data package contains JSON data files generated from the official Unicode CLDR JSON data. This package avoids third-party library vulnerabilities present in the older cldr-data package. To use cultures other than en-US, load the appropriate CLDR data using the loadCldr function.

NOTE

Syncfusion^® CLDR data package is published within a week after each official Unicode CLDR JSON data release.

Individual file path reference

Load Syncfusion^® CLDR data by referring to individual file paths from the package:

File Name	Path
ca-gregorian	@syncfusion/ej2-cldr-data/main/en/ca-gregorian.json
timeZoneNames	@syncfusion/ej2-cldr-data/main/en/timeZoneNames.json
numbers	@syncfusion/ej2-cldr-data/main/en/numbers.json
currencies	@syncfusion/ej2-cldr-data/main/en/currencies.json
numberingSystems	@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json

Single file path reference

Alternatively, load Syncfusion^® CLDR data using a single consolidated file:

File Name	Path
ca-gregorian, timeZoneNames, numbers, currencies	@syncfusion/ej2-cldr-data/main/en/all.json
numberingSystems	@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json

Note: For en, dependency files are already loaded in the library.

Installing CLDR data

Install the Syncfusion^® CLDR data package through npm:

npm install @syncfusion/ej2-cldr-data

Binding to i18n library

The i18n library uses CLDR data to format and parse numbers and date/time values for the en culture. Load the data using the loadCldr function:

import { loadCldr } from '@syncfusion/ej2-base';
import enNumberData from "@syncfusion/ej2-cldr-data/main/en/numbers.json";
import enTimeZoneData from "@syncfusion/ej2-cldr-data/main/en/timeZoneNames.json";

loadCldr(enNumberData, enTimeZoneData);

Changing Global Culture and Currency Code

Update the default culture and currency code across all Syncfusion^® Angular UI Components using the setCulture and setCurrencyCode methods:

import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';

setCulture('ar');
setCurrencyCode('QAR');

Note: If global culture is not set, en-US is the default locale and USD is the default currency code.

Manipulating Numbers

Supported format string

Number formatting and parsing align with NumberFormatOptions. Specify relevant properties as shown:

No	Properties	Description
1	`format`	Specifies the format type. Possible values are: 1. N – numeric type 2. C – currency type 3. P – percentage type Example: `formatNumber(1234344, {format: 'N4'})` Note: If no format is specified, numeric type is used by default.
2	`minimumFractionDigits`	Specifies the minimum number of fraction digits. Possible values are 0 to 20.
3	`maximumFractionDigits`	Specifies the maximum number of fraction digits. Possible values are 0 to 20.
4	`minimumSignificantDigits`	Specifies the minimum number of significant digits. Possible values are 1 to 21. Note: When `minimumSignificantDigits` is set, `maximumSignificantDigits` is mandatory.
5	`maximumSignificantDigits`	Specifies the maximum number of significant digits. Possible values are 1 to 21. Note: When `maximumSignificantDigits` is set, `minimumSignificantDigits` is mandatory.
6	`useGrouping`	Enables or disables the group separator. Default value is `true`.
7	`minimumIntegerDigits`	Specifies the minimum number of integer digits. Possible values are 1 to 21.
8	`currency`	Specifies the currency code for currency formatting.

Note: Properties minimumIntegerDigits, minimumFractionDigits, and maximumFractionDigits form Group One. Properties minimumSignificantDigits and maximumSignificantDigits form Group Two. If Group Two properties are defined, Group One properties are ignored.

Custom number formatting and parsing

Create custom number formats by specifying a pattern directly in the format property of NumberFormatOptions. Use one or more of the custom format specifiers below:

Specifier	Description	Input	Output
0	Displays the corresponding digit or zero if absent.	`formatNumber(123, {format: '0000'})`	‘0123’
#	Displays the corresponding digit; omits if absent.	`formatNumber(1234, {format: '####'})`	‘1234’
.	Denotes decimal point position.	`formatNumber(546321, {format: '###0.##0#'})`	‘546321.000’
%	Applies percentage format.	`formatNumber(1, {format: '0000 %'})`	‘0100 %’
$	Applies currency format based on global currency code.	`formatNumber(13, {format: '$ ###.00'})`	’$ 13.00’
;	Specifies separate formats for positive, negative, and zero values.	`formatNumber(-120, {format: '###.##;(###.00);-0'})`	‘(120.00)’
‘String’	Displays literal text enclosed in single quotes.	`formatNumber(-123.44, {format: "####.## '@'"})`	‘123.44 @’

Note: When a custom format pattern is specified, other NumberFormatOptions properties are not applied.

Number Parsing

`getNumberParser`

The getNumberParser method returns a function that parses strings based on the specified NumberFormatOptions.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component } from '@angular/core';
import { Internationalization } from  '@syncfusion/ej2-base';

@Component({
    
standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div>FormattedValue:<span class='format text'>123567.45%</span></div>
    <div>ParsedOutput:<span class='result text'> </span></div>
    </div>`
})

export class AppComponent {
    ngAfterViewInit() {
        let intl: Internationalization = new Internationalization();
        let nParser: Function =  intl.getNumberParser({ format:'P2' , useGrouping: false});
        let val: number = nParser('123567.45%');
        (document.querySelector('.result') as Element).innerHTML = val + '';
        }
        }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

`parseNumber`

The parseNumber method parses a string value based on NumberFormatOptions and returns the numeric value.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component } from '@angular/core';
import { Internationalization } from  '@syncfusion/ej2-base';

@Component({

standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div>FormattedValue:<span class='format text'>$01,234,545.650</span></div>
    <div>ParsedOutput:<span class='result text'> </span></div>
    </div>`
})

export class AppComponent {
    ngAfterViewInit() {
        let intl: Internationalization = new Internationalization();
        let val: number = intl.parseNumber('$01,234,545.650', { format: 'C3', currency: 'USD', minimumIntegerDigits: 8 });
        (document.querySelector('.result') as any).innerHTML = val + '';
        }
        }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Number formatting

`getNumberFormat`

The getNumberFormat method returns a function that formats numbers based on the specified NumberFormatOptions.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component } from '@angular/core';
import { Internationalization } from  '@syncfusion/ej2-base';

@Component({
standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div>Value:<span class='format text'>1234545.65</span></div>
    <div>Formatted Value:<span class='result text'> </span></div>
    </div> `
})

export class AppComponent {
    ngAfterViewInit() {
        let intl: Internationalization = new Internationalization();
        let nFormatter: Function = intl.getNumberFormat({ skeleton: 'C3', currency: 'USD',minimumIntegerDigits:8});
        let formattedValue: string = nFormatter(1234545.65);
        (document.querySelector('.result') as Element).innerHTML = formattedValue as string;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

`formatNumber`

The formatNumber method formats a numeric value based on NumberFormatOptions and returns the formatted string.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component } from '@angular/core';
import { Internationalization } from  '@syncfusion/ej2-base';

@Component({
standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div>Value:<span class='format text'>1234545.65</span></div>
    <div>Formatted Value:<span class='result text'> </span></div>
    </div> `
    })

export class AppComponent {
    ngAfterViewInit() {
        let intl: Internationalization = new Internationalization();
        let formattedString: string = intl.formatNumber(12345.65,{ format:'C5' ,
        useGrouping: false,minimumSignificantDigits:1, maximumSignificantDigits:3 });
        (document.querySelector('.result') as Element).innerHTML = formattedString;
        }
        }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Manipulating DateTime

Supported format string

Date formatting and parsing operations use the DateFormatOptions. Specify some or all of the properties shown below:

Options	Description
Type	Specifies the format type. Supported types: 1. `date` 2. `dateTime` 3. `time` Based on the type, supported skeletons are: short, medium, long, full Example: `formatDate(new Date(), {type: 'date', skeleton: 'medium'})` Note: If type is not specified, `date` is used by default.
skeleton	Specifies the format pattern for date/time output.

Date type skeletons

skeleton	Option input	Format Output
short	{type: ‘date’, skeleton: ‘short’}	11/4/16
medium	{type: ‘date’, skeleton: ‘medium’}	Nov 4, 2016
long	{type: ‘date’, skeleton: ‘long’}	November 4, 2016
full	{type: ‘date’, skeleton: ‘full’}	Friday, November 4, 2016

Time type skeletons

skeleton	Option input	Format Output
short	{type: ‘time’, skeleton: ‘short’}	1:03 PM
medium	{type: ‘time’, skeleton: ‘medium’}	1:03:04 PM
long	{type: ‘time’, skeleton: ‘long’}	1:03:04 PM GMT+5
full	{type: ‘time’, skeleton: ‘full’}	1:03:04 PM GMT+05:30

DateTime type skeletons

skeleton	Option input	Format Output
short	{type: ‘dateTime’, skeleton: ‘short’}	11/4/16, 1:03 PM
medium	{type: ‘dateTime’, skeleton: ‘medium’}	Nov 4, 2016, 1:03:04 PM
long	{type: ‘dateTime’, skeleton: ‘long’}	November 4, 2016 at 1:03:04 PM GMT+5
full	{type: ‘dateTime’, skeleton: ‘full’}	Friday, November 4, 2016 at 1:03:04 PM GMT+05:30

Additional skeletons

Beyond standard date formats, use these additional skeletons for specialized formatting:

skeleton	Option input	Format Output
d	{skeleton: ‘d’}	7
E	{skeleton: ‘E’}	Mon
Ed	{skeleton: ‘Ed’}	7 Mon
Ehm	{skeleton: ‘Ehm’}	Mon 12:43 AM
EHm	{skeleton: ‘EHm’}	Mon 12:43
Ehms	{skeleton: ‘Ehms’}	Mon 2:45:23 PM
EHms	{skeleton: ‘EHms’}	Mon 12:45:45
Gy	{skeleton: ‘Gy’}	2016 AD
GyMMM	{skeleton: ‘GyMMM’}	Nov 2016 AD
GyMMMd	{skeleton: ‘GyMMMd’}	Nov 7, 2016 AD
GyMMMEd	{skeleton: ‘GyMMMEd’}	Mon, Nov 7, 2016 AD
h	{skeleton: ‘h’}	12 PM
H	{skeleton: ‘H’}	12
hm	{skeleton: ‘hm’}	12:59 PM
Hm	{skeleton: ‘Hm’}	12:59
hms	{skeleton: ‘hms’}	12:59:13 PM
Hms	{skeleton: ‘Hms’}	12:59:13
M	{skeleton: ‘M’}	11
Md	{skeleton: ‘Md’}	11/7
MEd	{skeleton: ‘MEd’}	Mon, 11/7
MMM	{skeleton: ‘MMM’}	Nov
MMMEd	{skeleton: ‘MMMEd’}	Mon, Nov 7
MMMd	{skeleton: ‘MMMd’}	Nov 7
ms	{skeleton: ‘ms’}	59:13
y	{skeleton: ‘y’}	2016
yM	{skeleton: ‘yM’}	11/2016
yMd	{skeleton: ‘yMd’}	11/7/2016
yMEd	{skeleton: ‘yMEd’}	Mon, 11/7/2016
yMMM	{skeleton: ‘yMMM’}	Nov 2016
yMMMd	{skeleton: ‘yMMMd’}	Nov 7, 2016
yMMMEd	{skeleton: ‘yMMMEd’}	Mon, Nov 7, 2016

Note: Culture-specific format skeletons are also supported.

Custom formats

Create custom date and time formats by specifying a pattern directly in the format property. Use one or more of the standard date/time symbols below:

Symbol	Description
G	Specifies the era in the date.
y	Specifies the year.
M / L	Specifies the month.
E / c	Specifies the day of the week.
d	Specifies the day of the month.
h / H	Specifies the hour. Use `h` for 12-hour format or `H` for 24-hour format.
m	Specifies the minutes.
s	Specifies the seconds.
f	Specifies the milliseconds.
a	Specifies the AM/PM designator (displayed only when hour is in `h` format).
z	Specifies the time zone.
’ (single quotes)	Displays literal text by enclosing it in single quotes.

Custom format example

import { Component } from '@angular/core';
import { Internationalization } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    templateUrl: 'default.html'
})
export class AppComponent {
    ngAfterViewInit() {
        let intl: Internationalization = new Internationalization();
        let formattedString: string = intl.formatDate(
            new Date('1/12/2014 10:20:33'),
            { format: "'year:' y 'month:' MM" }
        );
        // Output: "year: 2014 month: 01"
    }
}

Note: When the format property is specified, other DateFormatOptions properties are not applied.

Date Parsing

`getDateParser`

The getDateParser method returns a function for parsing strings based on the specified DateFormatOptions.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component } from '@angular/core';
import { Internationalization } from  '@syncfusion/ej2-base';

@Component({
standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div>Fromatted value:<span class='format text'>Friday, November 4, 2016 at 1:03:04 PM GMT+05:30</span></div>
    <div>parsed Value:<span class='result text'> </span></div>
    </div> `
})

export class AppComponent {
    ngAfterViewInit() {
        let intl: Internationalization = new Internationalization();
        let dParser: Function = intl.getDateParser({skeleton: 'full', type: 'dateTime'});
        let val: Date = dParser('Friday, November 4, 2016 at 1:03:04 PM GMT+05:30');
        (document.querySelector('.result') as Element).innerHTML = val.toString();
        }
        }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

`parseDate`

The parseDate method parses a string value based on DateFormatOptions and returns the date object.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component } from '@angular/core';
import { Internationalization } from  '@syncfusion/ej2-base';

@Component({
standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div>Fromatted value:<span class='format text'>11/2016</span></div>
    <div>parsed Value:<span class='result text'> </span></div>
    </div> `
})

export class AppComponent {
    ngAfterViewInit() {
        let intl:Internationalization = new Internationalization();
        let val: number | any =  intl.parseDate('11/2016',{skeleton: 'yM'});
        (document.querySelector('.result') as Element).innerHTML = val.toString();
        }
        }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Date Formatting

`getDateFormat`

The getDateFormat method returns a function that formats date objects based on the specified DateFormatOptions.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component } from '@angular/core';
import { Internationalization } from  '@syncfusion/ej2-base';

@Component({
standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div>DateValue:<span class='format text'>new Date('1/12/2014 10:20:33')</span></div>
    <div>Formatted Value:<span class='result text'> </span></div>
    <div> `
})

export class AppComponent {
    ngAfterViewInit() {
        let intl: Internationalization = new Internationalization();
        let dFormatter: Function = intl.getDateFormat({ skeleton: 'full', type: 'dateTime' });
        let formattedString: string = dFormatter(new Date('1/12/2014 10:20:33'));
        (document.querySelector('.result') as Element).innerHTML = formattedString;
        }
        }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

`formatDate`

The formatDate method formats a date object based on DateFormatOptions and returns the formatted string.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'


 

import { Component } from '@angular/core';
import { Internationalization } from  '@syncfusion/ej2-base';

@Component({

standalone: true,
    selector: 'app-root',
    template:` <div id='container'>
    <div>DateValue:<span class='format text'>new Date('1/12/2014 10:20:33')</span></div>
    <div>Formatted Value:<span class='result text'> </span></div>
    <div> `
})

export class AppComponent {
    ngAfterViewInit() {
        let intl: Internationalization = new Internationalization();
        let date: Date = new Date();
        let formattedString: string =  intl.formatDate(new Date('1/12/2014 10:20:33'), { skeleton: 'GyMMM' });
        (document.querySelector('.result') as Element).innerHTML = formattedString;
        }
        }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Internationalization

Loading CLDR-JSON Data

Individual file path reference

Single file path reference

Installing CLDR data

Binding to i18n library

Changing Global Culture and Currency Code

Manipulating Numbers

Supported format string

Custom number formatting and parsing

Number Parsing

`getNumberParser`

`parseNumber`

Number formatting

`getNumberFormat`

`formatNumber`

Manipulating DateTime

Supported format string

Custom formats

Date Parsing

`getDateParser`

`parseDate`

Date Formatting

`getDateFormat`

`formatDate`