Components / Globalization / Internationalization

Getting Started with the Kendo UI for Angular Internationalization

The Internationalization package applies the desired cultures by providing services and pipes for the parsing and formatting of dates and numbers.

Together with the Localization package, the Internationalization package provides the globalization features of Kendo UI for Angular. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

Basic Usage

The following example demonstrates how to utilize the Internationalization package in basic use-case scenarios.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
        <h3>Pipes</h3>
        <ul>
          <li>{{ decimal | kendoNumber:'c' }}</li>
          <li>{{ date | kendoDate }}</li>
        </ul>
        <h3>Service</h3>
        <ul>
          <li>{{ intl.formatNumber(decimal, "c") }}</li>
          <li>{{ intl.formatDate(date) }}</li>
        </ul>
      `
})
export class AppComponent {
    public decimal = 42.123;
    public date = new Date();

    constructor(public intl: IntlService) {}
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { IntlModule } from '@progress/kendo-angular-intl';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, IntlModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Installation

  1. Download and install the package:

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

  2. Once installed and depending on the requirements of your project, refer to the documentation on services or pipes.

Dependencies

The Internationalization package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs

The following dependencies will be installed automatically:

  • @telerik/kendo-intl

Functionality and Features

In this article