Taiga UI — i18n

Website • Documentation • Core team

A package with tools for Taiga UI library i18n

Supported languages:

Language	Constant name
English (by default)	TUI_ENGLISH_LANGUAGE
Russian	TUI_RUSSIAN_LANGUAGE
Spanish	TUI_SPANISH_LANGUAGE
German	TUI_GERMAN_LANGUAGE
Turkish	TUI_TURKISH_LANGUAGE
Dutch	TUI_DUTCH_LANGUAGE
Ukrainian	TUI_UKRAINIAN_LANGUAGE
French	TUI_FRENCH_LANGUAGE
Vietnamese	TUI_VIETNAMESE_LANGUAGE
Portuguese	TUI_PORTUGUESE_LANGUAGE
Italian	TUI_ITALIAN_LANGUAGE
Polish	TUI_POLISH_LANGUAGE
Chinese	TUI_CHINESE_LANGUAGE

It's a part of Taiga UI that is fully-treeshakable Angular UI Kit consisting of multiple base libraries and several add-ons

How to install

If you have @taiga-ui/core in your app, you do not need to install anything. i18n package is included as a dependency.

How to use

You have English by default.

If you want to change it, you need to provide TUI_LANGUAGE token in your app.module:

./app.module.ts

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

@NgModule({
  // ...
  providers: [
    {
      provide: TUI_LANGUAGE,
      useValue: of(TUI_RUSSIAN_LANGUAGE),
    },
  ],
})
export class AppModule {}

You can also switch languages on the fly. Use useFactory or useClass with a service to make a stream of dictionaries.

How to add a language

Feel free to add new languages!

1. Go to 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. If you need more, please write to us via issues or any other way of contact :)

./serbian/index.ts

import {TuiLanguage, TuiLanguagePreview} from '@taiga-ui/i18n';
import {TUI_SERBIAN_LANGUAGE_ADDON_COMMERCE} from './addon-commerce';
import {TUI_SERBIAN_LANGUAGE_ADDON_TABLE} from './addon-table';
import {TUI_ENGLISH_LANGUAGE_ADDON_EDITOR} from './addon-editor';
import {TUI_SERBIAN_LANGUAGE_CORE} from './core';
import {TUI_SERBIAN_LANGUAGE_KIT} from './kit';

const TUI_SERBIAN_LANGUAGE_PREVIEW: TuiLanguagePreview = {
  previewTexts: {rotate: 'rotiraj'},
  zoomTexts: {
    zoomOut: 'odzumiraj',
    zoomIn: 'zumiraj',
    reset: 'reset',
  },
};

export const TUI_SERBIAN_LANGUAGE: TuiLanguage = {
  ...TUI_SERBIAN_LANGUAGE_CORE,
  ...TUI_SERBIAN_LANGUAGE_KIT,
  ...TUI_SERBIAN_LANGUAGE_ADDON_TABLE,
  ...TUI_SERBIAN_LANGUAGE_ADDON_COMMERCE,
  ...TUI_ENGLISH_LANGUAGE_ADDON_EDITOR,
  ...TUI_SERBIAN_LANGUAGE_PREVIEW,
  name: 'serbian',
};

./app.module.ts

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

@NgModule({
  // ...
  providers: [
    {
      provide: TUI_LANGUAGE,
      useValue: of(TUI_SERBIAN_LANGUAGE),
    },
  ],
})
export class AppModule {}

Thank you!