🎨 Frontend & UI
Internationalization (i18n)
Multi-language support using ngx-translate.
Supported Languages
| Code | Language | Status |
|---|---|---|
en | English | ✅ Default |
es | Spanish | ✅ |
fr | French | ✅ |
ru | Russian | ✅ |
bg | Bulgarian | ✅ |
he | Hebrew | ✅ |
ar | Arabic | ✅ (RTL) |
pt | Portuguese | ✅ |
de | German | ✅ |
nl | Dutch | ✅ |
zh | Chinese | ✅ |
Translation Files
Located at apps/gauzy/src/assets/i18n/:
i18n/
├── en.json # English (source)
├── es.json # Spanish
├── fr.json # French
├── ru.json # Russian
└── ...Usage
In Templates
<!-- Pipe -->
<h1>{{ 'DASHBOARD.TITLE' | translate }}</h1>
<!-- Directive -->
<p [translate]="'DASHBOARD.SUBTITLE'" [translateParams]="{ count: 5 }"></p>In Components
constructor(private translateService: TranslateService) {}
ngOnInit() {
const title = this.translateService.instant('DASHBOARD.TITLE');
}Translation File Format
{
"DASHBOARD": {
"TITLE": "Dashboard",
"SUBTITLE": "Welcome back, {{ name }}",
"WIDGETS": {
"TOTAL_HOURS": "Total Hours",
"PROJECTS": "Projects"
}
}
}RTL Support
Arabic and Hebrew enable RTL layout:
this.translateService.onLangChange.subscribe(({ lang }) => {
document.dir = ["ar", "he"].includes(lang) ? "rtl" : "ltr";
});Configuration
# Default language
AVAILABLE_LOCALES=en,es,fr,ru,bg
DEFAULT_LOCALE=en