Internationalization

Supported locales

• 🇬🇧 enEnglish
• 🇫🇷 fr-FRFrançais
• 🇬🇷 elΕλληνικά
• 🇵🇱 plPolski
• 🇪🇸 es-ESEspañol

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

Quick setup

Add provideEagamiUi() to your app config. Without arguments it defaults to English, so calling it is optional unless you want a different starting locale.

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

export const appConfig: ApplicationConfig = {
  providers: [provideEagamiUi({ locale: 'fr-FR' })],
};

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 ».'