Angular Internationalization. ngx-translate
In this video, we will explore internationalization (i18n) in Angular. Internationalization is the process of adapting an application and its data to local standards and regional settings. For example, decimal separators, date formats, currencies, and more.
Angular has built-in i18n support through the @angular/localize package. You can add this package to your project by running the command ng add @angular/localize.
@angular/localize allows you to create multilingual applications. However, a separate build is required for each language. In addition, translations are stored in specific XML-based .xlf files.
That is why many developers prefer the simpler and more popular solution — ngx-translate, which provides a powerful API for building multilingual Angular applications.
app.ts
import { Component, inject } from '@angular/core';
import { MatToolbar } from '@angular/material/toolbar';
import { CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, registerLocaleData } from '@angular/common';
import localeRu from '@angular/common/locales/ru';
import localeFr from '@angular/common/locales/fr';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import { MatButton } from '@angular/material/button';
registerLocaleData(localeRu);
registerLocaleData(localeFr);
@Component({
selector: 'app-root',
imports: [MatToolbar, DatePipe, CurrencyPipe, DecimalPipe, PercentPipe, TranslatePipe, MatButton],
templateUrl: './app.html',
styleUrl: './app.scss',
})
export class App {
protected today = new Date();
private translate = inject(TranslateService);
constructor() {
this.translate.addLangs(['en', 'ru']);
this.translate.setFallbackLang('en');
this.translate.use('en');
}
protected changeLang() {
this.translate.use(this.translate.getCurrentLang() === 'en' ? 'ru' : 'en');
}
}
app.html
<header>
<mat-toolbar color="primary">
<span>{{'APP.TITLE' | translate}}</span>
</mat-toolbar>
</header>
<p>Date: {{today | date : 'MMM d, y, HH:mm:ss a': '+0200' : 'fr'}}</p>
<p>Currency: {{125 | currency : 'EUR' : 'symbol-narrow' : '1.1-1' : 'fr'}}</p>
<p>Number: {{12.45 | number : '1.1-1' : 'fr'}}</p>
<p>Percent: {{0.25 | percent : '1.0' : 'ru'}}</p>
<button mat-button (click)="changeLang()">Chang lang</button>app.config.ts
import {
ApplicationConfig,
InjectionToken,
provideBrowserGlobalErrorListeners,
provideZonelessChangeDetection
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideTranslateService } from '@ngx-translate/core';
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
export const API_URL = new InjectionToken<string>('API_URL');
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
provideRouter(routes),
provideTranslateService({
loader: provideTranslateHttpLoader({
prefix: '/i18n/',
suffix: '.json',
}),
fallbackLang: 'en',
lang: 'en',
}),
{ provide: API_URL, useValue: 'https://jsonplaceholder.typicode.com/' },
],
};
0 Comments