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.

Internationalization

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

For more information, refer to:

Messages

The Label supports both built-in and custom messages.

Built-In Messages

To translate the built-in Label messages, you can 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 Label 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 Label and FloatingLabel components.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
            <h6>Label</h6>
            <kendo-label
                text="Enter Name"
                [optional]="true"
                [for]="nameInput">
                <kendo-label-messages optional="My Optional"></kendo-label-messages>
                <input
                    #nameInput
                    [(ngModel)]="name"
                    kendoTextBox name="name"
                    />
            </kendo-label>
        </div>
        <div class="wrapper">
            <h6>Floating Label</h6>
            <kendo-floatinglabel
                text="Enter Text"
                [optional]="true">
                <kendo-floatinglabel-messages optional="My Optional"></kendo-floatinglabel-messages>
                <input
                    [(ngModel)]="firstName"
                    kendoTextBox name="firstName"
                    />
            </kendo-floatinglabel>
        </div>
    `,
    styles: [`
        .wrapper {
            height: 100px;
        }
    `]
})
export class AppComponent {
    public name: string;
}
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LabelModule } from '@progress/kendo-angular-label';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

import { RTL } from '@progress/kendo-angular-l10n';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, LabelModule, InputsModule]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

All messages, available for customization, are listed in the CustomMessagesComponent API.

Right-to-Left Support

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

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

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
            <h5>Associate by template reference</h5>
            <kendo-label
                text="Enter First Name"
                [for]="nameInput">
                <input
                    #nameInput
                    [(ngModel)]="firstName"
                    kendoTextBox name="firstName"
                    />
            </kendo-label>
        </div>
        <div class="wrapper">
            <h5>Associate by id</h5>
            <kendo-label
                text="Enter Last Name"
                for="last-name">
                <input
                    [(ngModel)]="lastName"
                    kendoTextBox name="lastName"
                    id="last-name"
                    />
            </kendo-label>
    `,
    styles: [`
        .wrapper {
            padding-bottom: 20px;
        }
    `]
})
export class AppComponent {
    public firstName: string;
    public lastName: string;
}
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';

import { RTL } from '@progress/kendo-angular-l10n';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, LabelModule],
    providers: [{ provide: RTL, useValue: true }]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

In this article