All Components
Components

Components / Globalization / Internationalization

Internationalization Overview

The Internationalization package provides services and pipes for the parsing and formatting of dates and numbers.

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 { LOCALE_ID, 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

Internationalization by Components

Currently, the following components support internationalization through the Kendo UI Internationalization package for Angular:

In this article