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