Ngx-TranslateHub is an Angular library designed to simplify language translation and localization in Angular applications. It provides a seamless way to load, manage, and apply translations dynamically using modern Angular features like signals and reacti
npm install ngx-translatehub
npm install ngx-translatehub --save
`
$3
Integrate NgxtranslatehubService into your Angular application:
`typescript
import { inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams } from "@angular/common/http";
import { map, Observable, switchMap, forkJoin } from "rxjs";
import { Languages } from "./languages";
const libreTranslateUrl = 'https://translate.fedilab.app/'; // Default URL
@Injectable({
providedIn: 'root'
})
export class NgxtranslatehubService {
http = inject(HttpClient);
constructor() {
const selectedLanguage = this.getLocaleLanguage();
console.log(Current selected language: ${selectedLanguage});
}
getLocaleLanguage(): string {
if (typeof localStorage !== 'undefined') {
const storedLanguage = localStorage.getItem('lang');
if (storedLanguage) {
return storedLanguage;
}
const browserLanguage = navigator.language.split('-')[0];
localStorage.setItem('lang', browserLanguage);
return browserLanguage;
}
return 'en'; // Fallback language
}
setLocaleLanguage(language: string): void {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('lang', language);
}
}
getLocaleDate() {
return new Date().toLocaleDateString();
}
getLanguages(): Observable {
return this.http.get(libreTranslateUrl + 'languages');
}
translate(text: string, targetLanguage: string): Observable {
const params = new HttpParams()
.set('q', text)
.set('source', "auto")
.set('target', targetLanguage);
return this.http.post(libreTranslateUrl + 'translate', null, { params }).pipe(
map((response: any) => response.translatedText)
);
}
loadData(url: string, lang: string): Observable {
this.setLocaleLanguage(lang);
// Fetch JSON data from the given URL
return this.http.get(url, { responseType: 'json' }).pipe(
switchMap(response => this.translateJson(response, lang))
);
}
translateJson(data: any, lang: string): Observable {
const stringMap = new Map();
// Step 1: Collect all strings from the JSON
const collectStrings = (obj: any): void => {
Object.keys(obj).forEach((key) => {
const value = obj[key];
if (typeof value === 'string') {
stringMap.set(value, value);
} else if (typeof value === 'object' && value !== null) {
collectStrings(value);
}
});
};
collectStrings(data);
// Step 2: Translate strings
const strings = Array.from(stringMap.keys());
const observables = strings.map((text) =>
this.translate(text, lang)
);
return forkJoin(observables).pipe(
map((translations: string[]) => {
// Map translations back to the stringMap
strings.forEach((original, index) => {
stringMap.set(original, translations[index]);
});
// Step 3: Apply translations back to the JSON
const applyTranslations = (obj: any): void => {
Object.keys(obj).forEach((key) => {
const value = obj[key];
if (typeof value === 'string') {
obj[key] = stringMap.get(value) || value;
} else if (typeof value === 'object' && value !== null) {
applyTranslations(value);
}
});
};
applyTranslations(data);
return data;
})
);
}
}
`
$3
`typescript
import {DestroyRef, inject, Injectable, signal} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {Languages} from "../models/languages";
import {NgxtranslatehubService} from "ngx-translatehub";
@Injectable({
providedIn: 'root',
})
export class TranslationService {
translatedJson: any = {};
private language = signal('');
currentDate: any;
private readonly destroyRef = inject(DestroyRef);
private readonly translationService = inject(NgxtranslatehubService);
private readonly http = inject(HttpClient);
getDefaultLanguage(): string {
this.language.set(this.translationService.getLocaleLanguage());
return this.language();
}
setDefaultLanguage(language: string): void {
this.language.set(language);
this.translationService.setLocaleLanguage(language);
}
getLanguages(): Languages[] {
let languages: Languages[] = [];
this.translationService.getLanguages()
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((response: Languages[]) => {
languages = response;
});
return languages;
}
loadData(url: string, lang: string): Observable {
return this.translationService.loadData(url, lang);
}
}
`
$3
`typescript
import {RouterLink} from "@angular/router";
import {MatOption} from "@angular/material/core";
import {MatError, MatFormField, MatLabel, MatSelect} from "@angular/material/select";
import {FormBuilder, FormGroup, ReactiveFormsModule} from "@angular/forms";
import {TranslationService} from "../../../services/translate.service";
import {Languages} from "../../../models/languages";
import {NgxtranslatehubDirective} from "ngx-translatehub";
@Component({
selector: 'app-header',
standalone: true,
providers: [],
imports: [
RouterLink,
MatOption,
MatSelect,
MatError,
MatFormField,
MatLabel,
ReactiveFormsModule,
NgxtranslatehubDirective
],
templateUrl: './header.component.html',
styleUrl: './header.component.scss'
})
export class HeaderComponent implements OnInit {
form: FormGroup = {} as FormGroup;
fb = inject(FormBuilder);
translationService = inject(TranslationService);
languages = signal([]);
language = signal('');
translatedData: any = {};
private readonly url = 'assets/i18n/header.json';
ngOnInit(): void {
this.getLanguages();
this.language.set(this.translationService.getDefaultLanguage());
this.loadTranslatedData();
this.form = this.fb.group({
lang: [this.language()]
});
}
loadTranslatedData(): void {
this.translationService.loadData(this.url, this.language()).subscribe(
(translatedData) => {
this.translatedData = translatedData;
console.log('Translated Data:', this.translatedData);
},
(error) => {
console.error('Error while translating:', error);
}
);
}
getLanguages() {
this.languages.set(this.translationService.getLanguages());
}
getLanguage() {
this.language.set(this.form.value.lang); // Set the current language
this.loadTranslatedData();
}
}
`
$3
`html
`
#### CSS
You can use this css to support on right-to-left and vice versa
`css
.rtl {
direction: rtl;
text-align: start; / 'start' will align text to the right in RTL mode /
}
/ Other styles to adjust padding, margins, etc., for RTL layout /
.rtl .some-class {
padding-right: 15px;
padding-left: 0;
}
`
#### Usage
This is how to use the directive
`html
`
$3
`typescript
import {Directive, ElementRef, Input, OnChanges, OnInit, Renderer2} from '@angular/core';
@Directive({
selector: '[libRtlSupportDirective]',
standalone: true
})
export class RtlSupportDirectiveDirective implements OnInit, OnChanges {
@Input() currentLang = 'en';
constructor(private el: ElementRef, private renderer: Renderer2) {
this.adjustLayoutForRtl();
}
ngOnInit(): void {
console.log('currentLang: ',this.currentLang);
this.adjustLayoutForRtl()
}
ngOnChanges() {
this.adjustLayoutForRtl(); // React to changes in currentLang
}
adjustLayoutForRtl() {
if (this.isRtlLanguage(this.currentLang)) {
this.renderer.addClass(this.el.nativeElement, 'rtl');
} else {
this.renderer.removeClass(this.el.nativeElement, 'rtl');
}
}
isRtlLanguage(lang: string): boolean {
// Add all RTL languages you want to support
const rtlLanguages = ['ar', 'he', 'fa', 'ur']; // arabic | hebrew | persian | urdu
return rtlLanguages.includes(lang);
}
}
`
The RtlSupportDirectiveDirective is a pivotal feature of the NgxTranslatekit library, designed to enhance the user experience for languages that are read from right to left. This directive dynamically adjusts the layout of an Angular application based on the current language selection, ensuring that text and other elements are correctly aligned for languages such as Arabic, Hebrew, Persian, and Urdu.
Here’s a brief overview of its functionality:
#### Dynamic Layout Adjustment:
It listens for changes in the language and automatically applies the ‘rtl’ class to elements, flipping the layout to match the reading direction of RTL languages.
#### Language Support:
By default, it supports a set of RTL languages but can be easily extended to include more languages as needed.
#### Ease of Use:
With simple input binding, the directive can be applied to any element that requires RTL support, making it a versatile tool for developers.
#### Seamless Integration:
As a standalone directive, it can be imported and used independently, allowing for modular and clean code architecture.
$3
This is the JSON file to translate
`json
{
"home": "home",
"tasks": "tasks",
"languages": "languages"
}
`
$3
This is how the translated page will look like:
Translator
Microservice architecture is a very popular approach in designing and implementing highly scalable web applications. Communication within a monolithic application between components is usually based on method or function calls within the same process. A microservices‑based application, on the other hand, is a distributed system running on multiple machines.
Translated Section {Persian [ fa ]}
`jade
Ngx-Translate کتابخانه کیت برای توسعه دهندگان
Ngx-Translate کیت یک کتابخانه جامع برای برنامه های Angular است که تسهیل بین المللی سازی با اجازه دادن به توسعه دهندگان به راحتی ترجمه برنامه های خود را به چندین زبان است. این یک سرویس ترجمه قدرتمند، همراه با یک لوله و دستورالعمل، برای مدیریت ترجمه ها و فایل های زبان به طور پویا بارگذاری از سرور فراهم می کند. کتابخانه از معماری مدولار Angular پشتیبانی می کند، توسعه دهندگان را قادر می سازد تا آن را در ماژول ریشه با TranslateModule.ForRoot() برای استفاده در سراسر برنامه یا ماژول های ویژگی با استفاده از TranslateModule.forChild وارد کنند. با ngx-Translatekit، توسعه دهندگان می توانند دسترسی جهانی برنامه های خود را با ارائه یک تجربه کاربری محلی افزایش دهند
``