All Components

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: number = 42.123;

    public date: Date = new Date();

    constructor(public intl: IntlService) {}
}
import { LOCALE_ID, NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

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

@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

Features

The Internationalization package delivers the following features:

Internationalization by Components

Currently, the following components support internationalization through the Internationalization package:

In this article