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