# Internationalization (i18n)

Some components in Taiga UI embedded texts and they use English translate by default. If you want to change it,
you need to provide
`TUI_LANGUAGE`
token in your configuration. Full list of supported language
[here.](https://github.com/taiga-family/taiga-ui/tree/main/projects/i18n/languages)

```ts
import {TUI_LANGUAGE, TUI_RUSSIAN_LANGUAGE} from '@taiga-ui/i18n';

bootstrapApplication(App, {
  providers: [
    // ...
    {
      provide: TUI_LANGUAGE,
      useValue: signal(TUI_RUSSIAN_LANGUAGE),
    },
  ],
}).catch((err: unknown) => console.error(err));
```

## Language Switcher

Making custom toggling between different languages

See it in action:

CLI's webpack-based build system

```ts
import {tuiLanguageSwitcher, TuiLanguageName} from '@taiga-ui/i18n';

bootstrapApplication(App, {
  providers: [
    // ...
    tuiLanguageSwitcher(
      /**
       * @note:
       * then the i18n language files will be loaded from node_modules
       */
      async (language: TuiLanguageName): Promise<unknown> =>
        import(
          /* webpackMode: "lazy" */
          /* webpackChunkName: "i18n-lazy-" */
          `@taiga-ui/i18n/languages/${language}`
          // also you can override the paths to your i18n language files
        ),
    ),
  ],
}).catch((err: unknown) => console.error(err));
```

CLI's esbuild-based build system

```ts
import {tuiLanguageSwitcher, TuiLanguageName} from '@taiga-ui/i18n';

bootstrapApplication(App, {
  providers: [
    // ...
    tuiLanguageSwitcher(async (language: TuiLanguageName): Promise<unknown> => {
      switch (language) {
        case 'belarusian':
          return import('@taiga-ui/i18n/languages/belarusian');
        case 'chinese':
          return import('@taiga-ui/i18n/languages/chinese');
        case 'dutch':
          return import('@taiga-ui/i18n/languages/dutch');
        case 'french':
          return import('@taiga-ui/i18n/languages/french');
        case 'german':
          return import('@taiga-ui/i18n/languages/german');
        case 'italian':
          return import('@taiga-ui/i18n/languages/italian');
        case 'polish':
          return import('@taiga-ui/i18n/languages/polish');
        case 'portuguese':
          return import('@taiga-ui/i18n/languages/portuguese');
        case 'russian':
          return import('@taiga-ui/i18n/languages/russian');
        case 'spanish':
          return import('@taiga-ui/i18n/languages/spanish');
        case 'turkish':
          return import('@taiga-ui/i18n/languages/turkish');
        case 'ukrainian':
          return import('@taiga-ui/i18n/languages/ukrainian');
        case 'vietnamese':
          return import('@taiga-ui/i18n/languages/vietnamese');

        case 'serbian': // custom language for example
          return import('@my-scope/serbian-language');

        default:
          return import('@taiga-ui/i18n/languages/english');
      }
    }),
  ],
}).catch((err: unknown) => console.error(err));
```

## How to add a language

1. Go to
[languages](https://github.com/taiga-family/taiga-ui/tree/main/projects/i18n/languages)
folder

2. Copy
`english`
folder and rename new folder with the name of language you speak

3. Translate entities in files. If you need some clarification, take a look at interfaces of entities

```ts
import {TUI_LANGUAGE} from '@taiga-ui/i18n';
import {TUI_SERBIAN_LANGUAGE} from './serbian';

bootstrapApplication(App, {
  providers: [
    // ...
    {
      provide: TUI_LANGUAGE,
      useValue: signal(TUI_SERBIAN_LANGUAGE),
    },
  ],
}).catch((err: unknown) => console.error(err));
```

### Usage Examples

#### Language Switcher

**Template:**
```html
<button appearance="secondary-grayscale" size="s" tuiButton tuiButtonSelect tuiChevron [(ngModel)]="language" (ngModelChange)="switcher.setLanguage($event)" > {{ language }} <tui-data-list-wrapper *tuiDropdown [items]="languages" />
</button>
```

**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiButton, TuiDropdown} from '@taiga-ui/core';
import {TuiLanguageSwitcherService} from '@taiga-ui/i18n';
import {TuiButtonSelect, TuiChevron, TuiDataListWrapper} from '@taiga-ui/kit';

@Component({
    selector: 'tui-i18n-example-1',
    imports: [
        FormsModule,
        TuiButton,
        TuiButtonSelect,
        TuiChevron,
        TuiDataListWrapper,
        TuiDropdown,
    ],
    templateUrl: './index.html',
    styleUrl: './index.less',
    changeDetection,
})
export default class Example {
    protected readonly switcher = inject(TuiLanguageSwitcherService);
    protected language = this.switcher.language;

    protected readonly languages = [
        'arabic',
        'belarusian',
        'chinese',
        'dutch',
        'english',
        'french',
        'german',
        'hebrew',
        'italian',
        'japanese',
        'kazakh',
        'korean',
        'lithuanian',
        'malay',
        'polish',
        'portuguese',
        'russian',
        'spanish',
        'turkish',
        'ukrainian',
        'vietnamese',
    ];
}
```

**LESS:**
```less
[tuiButton],
tui-data-list-wrapper {
    text-transform: capitalize;
}
```