All Components

Globalization

The globalization process combines the translation of component messages with adapting them to specific cultures.

For more information on how globalization practices are implemented in Kendo UI for Angular, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

The following example demonstrates how to use the Spanish locale and the Increment and Decrement button titles.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-numerictextbox format="c" [value]="10000.10">
            <kendo-numerictextbox-messages
                increment="Incrementar valor"
                decrement="Disminuir valor"
            ></kendo-numerictextbox-messages>
        </kendo-numerictextbox>
    `
})

export class AppComponent {
}
import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { InputsModule } from '@progress/kendo-angular-inputs';

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

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

/* Loading CLDR data */
 import * as likelySubtags from 'cldr-data/supplemental/likelySubtags.json';
 import * as weekData from 'cldr-data/supplemental/weekData.json';
 import * as currencyData from 'cldr-data/supplemental/currencyData.json';
 import * as numbers from 'cldr-data/main/es/numbers.json';
 import * as timeZoneNames from 'cldr-data/main/es/timeZoneNames.json';
 import * as calendar from 'cldr-data/main/es/ca-gregorian.json';
 import * as currencies from 'cldr-data/main/es/currencies.json';
 import * as dateFields from 'cldr-data/main/es/dateFields.json';

 load(
     likelySubtags,
     weekData,
     currencyData,
     numbers,
     currencies,
     calendar,
     dateFields,
     timeZoneNames
 );

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, InputsModule ],
  providers:    [ { provide: LOCALE_ID, useValue: 'es' } ]
})
export class AppModule { }

Internationalization

The internationalization (i18n) process applies specific culture formats to a web application.

For more information, refer to:

Messages

The NumericTextBox, Slider, and Switch components support both built-in and custom messages.

Built-In Messages

To translate the built-in messages, utilize the Angular i18n framework. For more information on how to achieve this, refer to the article on Localization.

Custom Messages

You can also override individual messages for each component instance by utilizing the attribute bindings. To use them, you do not have to set up the application for i18n.

In i18n applications, message attributes take precedence over localized text from translation files.

The following example demonstrates how to customize the built-in messages of the NumericTextBox.

@Component({
    selector: 'my-app',
    template: `
        <kendo-numerictextbox>
            <kendo-numerictextbox-messages
                increment="Custom increment"
                decrement="Custom decrement"
            ></kendo-numerictextbox-messages>
        </kendo-numerictextbox>
    `
})

class AppComponent {
}

Right-to-Left Support

Due to browser limitations, the MaskedTextBox does not support RTL text direction.

The following example demonstrates how to utilize the RTL support for the Inputs.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div class="example-wrapper">
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>NumericTextBox</p>
                <kendo-numerictextbox
                    [(ngModel)] = "numericValue"
                ></kendo-numerictextbox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Slider (value = {{sliderValue}})</p>
                <kendo-slider
                    [min]="min"
                    [max]="max"
                    [smallStep]="smallStep"
                    [(ngModel)] = "sliderValue"
                ></kendo-slider>
            </div>
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Switch</p>
                <kendo-switch [(ngModel)]="switchValue"></kendo-switch>
            </div>
        </div>
    </div>
    `
})

export class AppComponent {
    public sliderValue = 5;
    public numericValue = 5;
    public switchValue = false;
    public min = 0;
    public max = 10;
    public smallStep = 1;
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { RTL } from '@progress/kendo-angular-l10n';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [ AppComponent],
    declarations: [ AppComponent],
    imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, InputsModule ],
    providers:    [ { provide: RTL, useValue: true } ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

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

In this article