# Internationalization (i18n) {#internationalization-i18n}


Multi-language support using `ngx-translate`.


## Supported Languages {#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 {#translation-files}


Located at `apps/gauzy/src/assets/i18n/`:

```
i18n/
├── en.json       # English (source)
├── es.json       # Spanish
├── fr.json       # French
├── ru.json       # Russian
└── ...
```


## Usage {#usage}



### In Templates {#in-templates}


```html
<!-- Pipe -->
<h1>{{ 'DASHBOARD.TITLE' | translate }}</h1>

<!-- Directive -->
<p [translate]="'DASHBOARD.SUBTITLE'" [translateParams]="{ count: 5 }"></p>
```


### In Components {#in-components}


```typescript
constructor(private translateService: TranslateService) {}

ngOnInit() {
  const title = this.translateService.instant('DASHBOARD.TITLE');
}
```


### Translation File Format {#translation-file-format}


```json
{
  "DASHBOARD": {
    "TITLE": "Dashboard",
    "SUBTITLE": "Welcome back, {{ name }}",
    "WIDGETS": {
      "TOTAL_HOURS": "Total Hours",
      "PROJECTS": "Projects"
    }
  }
}
```


## RTL Support {#rtl-support}


Arabic and Hebrew enable RTL layout:

```typescript
this.translateService.onLangChange.subscribe(({ lang }) => {
  document.dir = ["ar", "he"].includes(lang) ? "rtl" : "ltr";
});
```


## Configuration {#configuration}


```bash
# Default language
AVAILABLE_LOCALES=en,es,fr,ru,bg
DEFAULT_LOCALE=en
```


## Related Pages {#related-pages}


- [Frontend Overview](https://sourcey-gauzy.pages.dev/frontend/frontend-overview/index.md)
- [Theming](https://sourcey-gauzy.pages.dev/frontend/theming/index.md)