All Components

Pipes

The Internationalization package allows you to streamline display-value transformations inside templates by utilizing pipes.

To enable the transformation of the input data in your application:

  1. Import IntlModule in your module. As a result, the default CldrIntlService is added as a provider and the kendoNumber and kendoDate pipes become available.

  2. (Optional) Load the locale data for the desired locales. By default, only en-US works.

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 { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <h3>Numbers</h3>
        <ul>
          <li>{{decimal | kendoNumber:'c' }}</li>
          <li>{{stringNumber | kendoNumber:'p' }}</li>
          <li>{{int | kendoNumber:'##.00' }}</li>
        </ul>
        <h3>Dates</h3>
        <ul>
          <li>{{date | kendoDate }}</li>
          <li>{{milliseconds | kendoDate: 'M/dd/yyy' }}</li>
          <li>{{stringDate | kendoDate: 'G' }}</li>
        </ul>
      `
})
export class AppComponent {
    protected decimal: number = 42.123;
    protected int: number = 42;
    protected stringNumber: string = '42.123';

    protected date: Date = new Date();
    protected milliseconds: number = this.date.getTime();
    protected stringDate: string = '01/02/2011';
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article