All Components

Globalization

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

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 Buttons do not provide built-in translated messages or the option to implement and localize custom ones.

Right-to-Left Support

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

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

@Component({
    selector: 'my-app',
    styles: ['.example-wrapper,.example-col{ vertical-align: top; }'],
    template: `
        <div class="example-wrapper">
            <div class="example-col">
              <p>Button</p>
              <button kendoButton (click)="onButtonClick()">Default</button>
              <button kendoButton (click)="onButtonClick()" [primary]="true">Primary</button>
              <button kendoButton (click)="onButtonClick()" [disabled]="true">Disabled</button>
            </div>
            <div class="example-col">
              <p>ButtonGroup</p>
              <kendo-buttongroup>
                <button kendoButton [toggleable]="true">
                  Option A
                </button>
                <button kendoButton [toggleable]="true">
                  Option B
                </button>
                <button kendoButton [toggleable]="true">
                  Option C
                </button>
              </kendo-buttongroup>
            </div>
            <div class="example-col">
                <p>DropDownButton</p>
                <kendo-dropdownbutton
                    [data]="dropDownButtonItems"
                    [icon]="'cog'"
                    (itemClick)="onSplitButtonItemClick($event)">
                    User Settings
                </kendo-dropdownbutton>
            </div>
            <div class="example-col">
                <p>SplitButton</p>
                <kendo-splitbutton
                    [data]="splitButtonItems"
                    [icon]="'paste'"
                    (itemClick)="onSplitButtonItemClick($event)"
                    (buttonClick)="onSplitButtonClick()">
                    Paste
                </kendo-splitbutton>
            </div>
        </div>
    `
})

export class AppComponent {
    imageUrl = 'https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png';

    splitButtonItems: Array<any> = [{
        text: 'Keep Text Only',
        icon: 'paste-plain-text',
        click: () => { console.log('Keep Text Only click handler'); }
    }, {
        text: 'Paste as HTML',
        icon: 'paste-as-html'
    }, {
        text: 'Paste Markdown',
        icon: 'paste-markdown'
    }, {
        text: 'Set Default Paste'
    }];

    dropDownButtonItems: Array<any> = [{
        text: 'My Profile'
    }, {
        text: 'Friend Requests'
    }, {
        text: 'Account Settings'
    }, {
        text: 'Support'
    }, {
        text: 'Log Out'
    }];

    public onSplitButtonClick(dataItem: any): void {
        console.log('Paste');
    }

    public onSplitButtonItemClick(dataItem: any): void {
        if (dataItem) {
            console.log(dataItem.text);
        }
    }

    onButtonClick() {
        console.log('click');
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { RTL } from '@progress/kendo-angular-l10n';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ButtonsModule],
    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);
In this article