Getting Started with the Kendo UI for Angular Internationalization

This guide provides the information you need to start using the Kendo UI for Angular Internationalization component—it includes instructions about the available installation approaches, the required dependencies, the code for running the project, and links to additional resources.

The Internationalization is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

After the completion of this guide, you will be able to achieve an end result as demonstrated in the following example.

Change Theme

Theme

Loading ...

Setting Up Your Angular Project

Before you start with the installation of any Kendo UI for Angular control, ensure that you have a running Angular project. The prerequisites to accomplish the installation of the components are always the same regardless of the Kendo UI for Angular package you want to use, and are fully described in the section on setting up your Angular project.

Installing the Package

To add the Kendo UI for Angular Internationalization package:

Run the following command:

npm install --save @progress/kendo-angular-intl @progress/kendo-licensing

Import the required components, directives and pipes:
- To enable all functionalities from the Internationalization package, import the KENDO_INTL utility array in your standalone component.
  
  The utility array is available starting from v16.6.0. If you use an older version of the package, please follow the approach from the Using Kendo Angular Components with NgModules article.
  ts
```
import { Component } from '@angular/core';
import { KENDO_INTL } from '@progress/kendo-angular-intl';

@Component({
    standalone: true,
    selector: 'my-app',
    imports: [KENDO_INTL]
})
```
- To add individual Internationalization functionalities, import the corresponding utility arrays in your standalone component. See the list of available utility arrays.
  
  For example if you only need the kendoDate pipe, import KENDO_DATE.
  ts
```
import { Component } from '@angular/core';
import { KENDO_DATE } from '@progress/kendo-angular-intl';

@Component({
    standalone: true,
    selector: 'my-app',
    imports: [KENDO_DATE]
})
```

Kendo Angular Internationalization Utility Arrays

The following table lists the exported utility arrays that you can import in your standalone Angular project.

Utility Array	Includes
`KENDO_NUMBER`	Number pipe (`kendoNumber`)
`KENDO_DATE`	Date pipe (`kendoDate`)
`KENDO_INTL`	All Internationalization pipes and functionalities.

Using the Package

After successfully installing the Internationalization, provide the IntlService service in the constructor in the app.component.ts file:
ts
```
export class AppComponent {
    constructor(public intl: IntlService) {}
}
```
Then, use the formatNumber function of the service to format the number:
html
```
<p>{{ intl.formatNumber(decimal, 'n2') }}</p>
```
Build and serve the application by running the following command in the root folder.
sh
```
ng serve
```
Point your browser to http://localhost:4200 to see the formatted number on the page.

Activating Your License Key

As of December 2020, using any of the UI components from the Kendo UI for Angular library requires either a commercial license key or an active trial license key. If your application does not contain a Kendo UI license file, activate your license key.

Next Steps

Dependencies

The following table lists the required dependencies that the Internationalization package needs to work as expected.

Package Name	Description
@angular/common	Provides the commonly-needed services, pipes, and directives provided by the Angular team. For more information, refer to the official Angular documentation.
@angular/core	Contains critical runtime parts of the Angular framework that are needed by every application. For more information, refer to the official Angular documentation.
@progress/kendo-licensing	Contains the `kendo-ui-license` CLI Tool for license management and the `validatePackage` function and type definitions that are used by licensed packages.
rxjs	Provides the RxJS library for reactive programming which uses Observables for an easier composition of asynchronous or callback-based code.

The following dependency will be installed automatically.

Package Name	Description
@progress/kendo-intl	Provides the Kendo UI services and pipes for the parsing and formatting of dates and numbers by using Unicode Common Locale Data Repository (CLDR) data.