Customise Languages

Let's add Hindi.

Step 1: Update transloco.config.js to add hi.

transloco.config.js

module.exports = {
  rootTranslationsPath: '../public/i18n/',
  langs: ['ar', 'en', 'hi'],
  keysManager: {
    output: '../public/i18n/',
    sort: true,
    unflat: true,
  },
};

Step 2: Update the Available Language type.

available-language.type.ts

export type AvailableLanguage = 'ar' | 'en' | 'hi';

Step 3: Update the Language Options constant.

language-options.constant.ts

export const LANGUAGE_OPTIONS: LanguageOption[] = [
  {
    directionality: 'ltr',
    font: 'noto-sans',
    icon: 'translate',
    nameKey: 'english',
    value: 'en',
  },
  {
    directionality: 'rtl',
    font: 'noto-sans-arabic',
    icon: 'translate',
    nameKey: 'arabic',
    value: 'ar',
  },
  {
    directionality: 'ltr',
    font: 'noto-sans',
    icon: 'translate',
    nameKey: 'hindi',
    value: 'hi',
  },
];

Step 4: Update the dynamic keys comment in the Settings Page Component.

settings-page.component.ts

/**
 * Dynamic keys to include in translations (https://github.com/jsverse/transloco-keys-manager?tab=readme-ov-file#dynamic-keys):
 *
 * t(jet-settings-page.arabic)
 * t(jet-settings-page.english)
 * t(jet-settings-page.hindi)
 */

Step 5: Run the i18n:extract script in package.json. This will add the missing keys and generate hi.json in /public/i18n/.

Step 6: Update the values in hi.json. Ensure the variables in dynamic translations are retained.

Done!

Jet in custom language