New to Kendo UI for Angular? Start a free 30-day trial

ngx-translate Integration with Kendo UI for Angular

Updated on Jan 20, 2026

Description

I want to integrate ngx-translate with Kendo UI for Angular components. How to achieve it?

This knowledge base article also answers the following questions:

How can I use ngx-translate for localizing Kendo UI for Angular components?
What is the best way to set up ngx-translate with Kendo UI for Angular?
How can I switch languages dynamically in my application?

To integrate ngx-translate with Kendo UI for Angular components, you need to create a custom message service that extends the MessageService from @progress/kendo-angular-l10n and uses TranslateService from @ngx-translate/core to fetch the translations.

Follow these step-by-step instructions to implement the integration:

Install the required dependencies for internationalization support:

bash

npm install @ngx-translate/core @ngx-translate/http-loader
npm install @progress/kendo-angular-l10n

Create JSON translation files in your assets/i18n directory. The files should contain translations for both your application and Kendo UI component messages:

English (en.json):

json

{
  "changeLanguage": "Change Language",
  "kendo.grid.noRecords": "No data available",
  "kendo.grid.loading": "Loading...",
  "kendo.pager.firstPage": "Go to the first page"
}

Spanish (es.json):

json

{
  "changeLanguage": "Cambiar Idioma",
  "kendo.grid.noRecords": "No hay datos disponibles",
  "kendo.grid.loading": "Cargando...",
  "kendo.pager.firstPage": "Ir a la primera página"
}

Create a custom message service that extends Kendo's MessageService and integrates with ngx-translate:

typescript

import { MessageService } from '@progress/kendo-angular-l10n';
import { TranslateService } from '@ngx-translate/core';
import { Injectable } from '@angular/core';

@Injectable()
export class MyMessageService extends MessageService {
    constructor(private translate: TranslateService) {
        super();
    }

    public get(key: string) {
        return this.translate.instant(key);
    }
}

This custom service:

Extends Kendo's MessageService to provide localization for Kendo components
Uses TranslateService.instant() to fetch translations synchronously
Acts as a bridge between ngx-translate and Kendo UI's localization system

Configure your application to use the custom message service and configure ngx-translate in your app.config.ts:

typescript

import { ApplicationConfig, provideAppInitializer, inject } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { MessageService } from '@progress/kendo-angular-l10n';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';
import { lastValueFrom } from 'rxjs';
import { MyMessageService } from './my-message.service';

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        provideHttpClient(),
        importProvidersFrom(
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            })
        ),
        { provide: MessageService, useClass: MyMessageService },
        provideAppInitializer(() => {
            const translate = inject(TranslateService);
            translate.setDefaultLang('en');
            return lastValueFrom(translate.use('en'));
        }),
    ],
};

Key configuration points:

provideHttpClient: Provides HTTP client for loading translation files
TranslateHttpLoader: Loads translation files from the specified path (./assets/i18n/)
MessageService provider: Replaces Kendo's default message service with your custom implementation
provideAppInitializer: Ensures translations are loaded before the application starts

Create a standalone component with language switching functionality:

typescript

import { Component, inject } from '@angular/core';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { MessageService } from '@progress/kendo-angular-l10n';
import { KENDO_GRID } from '@progress/kendo-angular-grid';
import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
import { take } from 'rxjs/operators';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [KENDO_GRID, KENDO_BUTTONS, TranslateModule],
    template: `
        @if (show) {
            <button kendoButton (click)="changeLanguage()">
                {{ 'changeLanguage' | translate }}
            </button>
            <kendo-grid [data]="[]">
                <kendo-grid-column title="ID"></kendo-grid-column>
                <kendo-grid-column title="Name"></kendo-grid-column>
                <kendo-grid-column title="Country"></kendo-grid-column>
            </kendo-grid>
        }
    `,
})
export class AppComponent {
    show = false;
    currentLanguage = 'en';

    private messages = inject(MessageService);
    public translate = inject(TranslateService);

    constructor() {
        this.translate
            .use(this.currentLanguage)
            .pipe(take(1))
            .subscribe(() => (this.show = true));
    }

    public changeLanguage(): void {
        this.show = false;
        this.currentLanguage = this.currentLanguage === 'en' ? 'es' : 'en';
        this.translate
            .use(this.currentLanguage)
            .pipe(take(1))
            .subscribe(() => {
                this.messages.notify(); // Notify Kendo components to refresh their translations
                this.show = true;
            });
    }
}

ngx-translate Integration with Kendo UI for Angular

Environment

Description

Solution

Suggested Links