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 Pager supports both built-in and custom messages.

Built-In Messages

To translate the built-in Pager 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 Pager 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 Pager.

import { PageChangeEvent } from '@progress/kendo-angular-pager';
import { Component, OnInit } from '@angular/core';
import { contacts } from './contacts';

@Component({
    selector: 'my-app',
    template: `
        <div class="contacts-wrapper">
            <div class="contacts-container">
                <contact-component *ngFor="let contact of pagedContacts" [contact]="contact"></contact-component>
            </div>
            <kendo-datapager
                style="width: 500px;"
                [pageSize]="pageSize"
                [skip]="skip"
                [type]="'input'"
                [total]="total"
                (pageChange)="onPageChange($event)">
                <kendo-datapager-messages
                    page="Página"
                    of="de"
                    items="ítems"
                    itemsPerPage="ítems por página"
                >
                </kendo-datapager-messages>
            </kendo-datapager>
        </div>
    `,
    styleUrls: ['styles.css']
})
export class AppComponent implements OnInit {
    public pageSize = 3;
    public skip = 0;
    public pagedContacts = [];
    public total = contacts.length;

    public ngOnInit(): void {
        this.pageData();
    }

    public onPageChange(e: PageChangeEvent): void {
        this.skip = e.skip;
        this.pageSize = e.take;
        this.pageData();
    }

    private pageData(): void {
        this.pagedContacts = contacts.slice(this.skip, this.skip + this.pageSize);
    }
}
// tslint:disable
export const contacts = [{
    contactId: 1,
    contactFirstName: `Amaya`,
    contactLastName: `Coffey`,
    contactMessages: 1
}, {
    contactId: 2,
    contactFirstName: `Dawson`,
    contactLastName: `Humphrey`,
    contactMessages: 2
}, {
    contactId: 3,
    contactFirstName: `Giulia`,
    contactLastName: `Haworth`,
    contactMessages: 6
}, {
    contactId: 4,
    contactFirstName: `Habib`,
    contactLastName: `Joyce`,
    contactMessages: 3
}, {
    contactId: 5,
    contactFirstName: `Jenson`,
    contactLastName: `Delaney`,
    contactMessages: 1
}, {
    contactId: 6,
    contactFirstName: `Lilly-Ann`,
    contactLastName: `Roche`,
    contactMessages: 2
}, {
    contactId: 7,
    contactFirstName: `Reilly`,
    contactLastName: `Mccullough`,
    contactMessages: 5
}];
import { Component, Input } from '@angular/core';

@Component({
    selector: 'contact-component',
    template: `
        <div class="contact">
            <div style="width: 70%; display: flex; align-items: center;">
                <img src="https://www.telerik.com/kendo-angular-ui-develop/components/pager/assets/contacts/{{contact.contactId}}.png"
                    alt="{{contact.ProductName}}" />
                <h3>{{contact.contactFirstName}} {{contact.contactLastName}}</h3>
            </div>
            <div class="messages">
                {{contact.contactMessages}} new message{{contact.contactMessages > 1 ? 's' : ''}}
            </div>
        </div>
    `,
    styles: [`
        .contact{
            width: 100%;
            height: 70px;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: solid;
            border-color: #ECEBEB;
            border-width: thin;
        }
        .contact img{
            width: 41px;
            height: 40px;
            margin-left 30px;
        }
        .contact h3{
            color: #656565;
            font-size: 1.1em;
            font-weight: bolder;
            line-height: 70px;
            margin: 0 20px;
        }
        .messages{
            background-color: #FF6358;
            height: 20px;
            width: 95px;
            border-radius: 3px;
            padding: 2px 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFFFFF;
            font-size: 0.8em;
        }
    `]
})

export class ContactComponent {
    @Input() public contact: any;
}
.content-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: auto;
    height: 470px;
}

.wrapper {
    text-align: center;
}

.demo-wrapper {
    width: 100%;
    overflow-x: auto;
}

.checkbox-wrapper label {
    display: inline-block;
    margin-right: 20px;
}

.title {
    text-transform: uppercase;
    color: #A1A0A1;
    line-height: 50px;
    margin-left: 10px;
}

.contacts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contacts-container{
    width:500px;
    height: 211px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border-style: none solid;
    border-color: #ECEBEB;
    border-width: thin;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.articles-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 770px;
}

.articles-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 770px;
    height: 340px;
    overflow: auto;
    border-style: none solid;
    border-color: #ECEBEB;
    border-width: thin;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.articles-title {
    text-transform: uppercase;
    color: #A1A0A1;
    line-height: 50px;
    padding-left: 18px;
    border: 1px solid #ECEBEB;
    display: inline-block; width: 100%;
}
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PagerModule } from '@progress/kendo-angular-pager';
import { ContactComponent } from './contact.component';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, ContactComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, PagerModule, FormsModule]
})
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 Pager.

import { PageChangeEvent } from '@progress/kendo-angular-pager';
import { Component, OnInit } from '@angular/core';
import { destinations } from './destinations';

@Component({
    selector: 'my-app',
    template: `
        <span class="title">
            Top European Destinations
        </span>
        <div class="wrapper">
            <div class="content-container">
                <destination-component
                    *ngFor="let destination of pagedDestinations"
                    [data]="destination">
                </destination-component>
            </div>
            <kendo-datapager
                [style.width.%]="100"
                [pageSize]="pageSize"
                [skip]="skip"
                [total]="total"
                (pageChange)="onPageChange($event)">
            </kendo-datapager>
        </div>
    `,
    styleUrls: ['styles.css']
})
export class AppComponent implements OnInit {
    public pageSize = 8;
    public skip = 0;
    public pagedDestinations = [];
    public total = destinations.length;

    public ngOnInit(): void {
        this.pageData();
    }

    public onPageChange(e: PageChangeEvent): void {
        this.skip = e.skip;
        this.pageSize = e.take;
        this.pageData();
    }

    private pageData(): void {
        this.pagedDestinations = destinations.slice(this.skip, this.skip + this.pageSize);
    }
}
import { Component, Input } from '@angular/core';

@Component({
    selector: 'destination-component',
    template: `
        <div class="destination">
            <img src="https://www.telerik.com/kendo-angular-ui-develop/components/pager/assets/destinations/{{data.destinationId}}.png"
                alt="{{data.destinationName}}" />
            <h3>{{data.destinationName}}</h3>
            <p>{{data.destinationText}}</p>
        </div>
    `,
    styles: [`
        .destination {
            position: relative;
            width: 170px;
            height: 230px;
            margin-left: 10px;
            padding: 0;
            cursor: default;
            cursor: default;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .destination img {
            width: 160px;
            height: 150px;
            margin-bottom: 10px;
        }
        .destination h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 100%;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: bolder;
            text-transform: uppercase;
            color: #656565;
        }
        .destination p {
            width: 100%;
            font-size: 0.8em;
            color: #BABABA;
        }
    `]
})

export class DestinationComponent {
    @Input() public data: any;
}
// tslint:disable
export const destinations = [{
    destinationId: 1,
    destinationName: `BRUSSELS, BELGIUM`,
    destinationText: `Chocolate, beer, music and surrealism.`
}, {
    destinationId: 2,
    destinationName: `PORTO, PORTUGAL`,
    destinationText: `Taste it, drink it, eat it, love it. Bem-vindo ao Porto!`
}, {
    destinationId: 3,
    destinationName: `MALAGA, SPAIN`,
    destinationText: `Enjoy the perfect climat.`
}, {
    destinationId: 4,
    destinationName: `BUDAPEST, HUNGARY`,
    destinationText: `One of the most exciting cities in the world.`
}, {
    destinationId: 5,
    destinationName: `BRATISLAVA, SLOVAKIA`,
    destinationText: `A modern city on the Danube.`
}, {
    destinationId: 6,
    destinationName: `FLORENCE, ITALY`,
    destinationText: `Love and culture are everywhere!`
}, {
    destinationId: 7,
    destinationName: `POZNAN, POLAND`,
    destinationText: `A unique heritage with rich cultural offer.`
}, {
    destinationId: 8,
    destinationName: `ATHENS, GREECE`,
    destinationText: `The biggest open-air museum in Europe.`
}, {
    destinationId: 9,
    destinationName: `SOFIA, BULGARIA`,
    destinationText: `One of Europe's oldest cities.`
}, {
    destinationId: 10,
    destinationName: `BORDEAUX, FRANCE`,
    destinationText: `Discover exciting new facets of its character.`
}, {
    destinationId: 11,
    destinationName: `GENEVA, SWITZERLAND`,
    destinationText: `One of the most welcoming cities in Europe.`
}, {
    destinationId: 12,
    destinationName: `RIGA, LATVIA`,
    destinationText: `At the crossroads of various nations and cultures.`
}, {
    destinationId: 13,
    destinationName: `SEVILLE, SPAIN`,
    destinationText: `Seville. Any time of year…`
}, {
    destinationId: 14,
    destinationName: `COLMAR, FRANCE`,
    destinationText: `A condensed version of the Alsace region.`
}, {
    destinationId: 15,
    destinationName: `VIENNA, AUSTRIA`,
    destinationText: `The Giant Ferris Wheel is awaiting you.`
}, {
    destinationId: 16,
    destinationName: `MONTPELLIER, FRANCE`,
    destinationText: `Smart, Mediterranean, attractive, welcoming and festive.`
}, {
    destinationId: 17,
    destinationName: `VALENCIA, SPAIN`,
    destinationText: `Sun, culture, history and future. `
}, {
    destinationId: 18,
    destinationName: `BARCELONA, SPAIN`,
    destinationText: `Barcelona never sleeps.`
}, {
    destinationId: 19,
    destinationName: `MILAN, ITALY`,
    destinationText: `The hub of Italian culture`
}, {
    destinationId: 20,
    destinationName: `GDANSK, POLAND`,
    destinationText: `You'll be amazed by the beauty of Gdansk.`
}, {
    destinationId: 21,
    destinationName: `ROME, ITALY`,
    destinationText: `Treat yourself to a stay in the Eternal City.`
}, {
    destinationId: 22,
    destinationName: `EDINBURGH, SCOTLAND`,
    destinationText: `Shopping, dining & architectural splendour.`
}, {
    destinationId: 23,
    destinationName: `LISBON, PORTUGAL`,
    destinationText: `The pure pleasure of being in one of the best cities in the world.`
}];
.content-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: auto;
    height: 470px;
}

.wrapper {
    text-align: center;
}

.demo-wrapper {
    width: 100%;
    overflow-x: auto;
}

.checkbox-wrapper label {
    display: inline-block;
    margin-right: 20px;
}

.title {
    text-transform: uppercase;
    color: #A1A0A1;
    line-height: 50px;
    margin-left: 10px;
}

.contacts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contacts-container{
    width:500px;
    height: 211px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border-style: none solid;
    border-color: #ECEBEB;
    border-width: thin;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.articles-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 770px;
}

.articles-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 770px;
    height: 340px;
    overflow: auto;
    border-style: none solid;
    border-color: #ECEBEB;
    border-width: thin;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.articles-title {
    text-transform: uppercase;
    color: #A1A0A1;
    line-height: 50px;
    padding-left: 18px;
    border: 1px solid #ECEBEB;
    display: inline-block; width: 100%;
}
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PagerModule } from '@progress/kendo-angular-pager';
import { AppComponent } from './app.component';
import { DestinationComponent } from './destination.component';
import { RTL } from '@progress/kendo-angular-l10n';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, DestinationComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, PagerModule, FormsModule],
    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