Taiga UI 5 is out!

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. 

    
      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:

Pages 24 Lines per page of 237
    
      
    

      
      
    

  
    
      class t{constructor(){this.switcher=s(b);this.language=this.switcher.language;this.languages=["arabic","belarusian","chinese","dutch","english","french","german","hebrew","italian","japanese","kazakh","korean","lithuanian","malay","polish","portuguese","russian","spanish","turkish","ukrainian","vietnamese"]}}
    

      
      
    

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

    

      
      
    

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

    

      
      
    

  
    
      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));
    

      
      
    

  
    
      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 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

    
      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));
GitHub StackBlitz