Internationalization

Supported locales

• 🇬🇧 English(en)
• 🇩🇪 Deutsch(de)
• 🇪🇸 Español(es-ES)
• 🇫🇷 Français(fr-FR)
• 🇮🇸 Íslenska(is)
• 🇳🇱 Nederlands(nl)
• 🇵🇱 Polski(pl)
• 🇧🇷 Português (Brasil)(pt-BR)
• 🇬🇷 Ελληνικά(el)
• 🇷🇺 Русский(ru)
• 🇺🇦 Українська(uk)
• 🇮🇱 עברית(he)
• 🇸🇦 العربية(ar)
• 🇮🇳 हिन्दी(hi)
• 🇨🇳 中文(zh-CN)

Unknown locales fall back to English, as do any keys missing from a partial override.

Quick setup

Add provideEagamiUi() to your app config and register the languages you use via locales. English is always available, so you ship only what you need.

import { frFR, provideEagamiUi } from '@eagami/ui';

export const appConfig: ApplicationConfig = {
  // Register the languages you use; English is always available.
  providers: [provideEagamiUi({ locale: 'fr-FR', locales: [frFR] })],
};

Live demo

Pick a locale and watch the components below pick up the matching strings and date formatting.

Runtime switching

Inject EagamiI18nService and call setLocale(). The active locale is a signal, so every component re-renders with the new strings without a refresh.

import { EagamiI18nService } from '@eagami/ui';

export class LanguageSwitcher {
  private readonly i18n = inject(EagamiI18nService);

  switchToFrench() {
    this.i18n.setLocale('fr-FR');
  }
}

Per-string overrides

Pass a messages object alongside the locale to swap individual strings. Anything you omit falls back to the locale's defaults.

provideEagamiUi({
  locale: 'en',
  messages: {
    paginator: { rowsPerPage: 'Items per page' },
    dataTable: { noData: 'Nothing here yet' },
  },
})

Most components also expose individual message inputs (e.g. placeholder on <ea-dropdown>) for one-off overrides at the call site.

French spacing helper

French typography expects a narrow non-breaking space before ? ! : ; » and after «. The exported frenchSpacing() helper converts regular spaces in your own French strings (the library handles its bundled French messages internally).

import { frenchSpacing } from '@eagami/ui';

frenchSpacing('Lignes par page :');     // 'Lignes par page :'
frenchSpacing('Il a dit « bonjour ».'); // 'Il a dit « bonjour ».'