Skip to content

Type-safe, reactive Angular i18n library. Lazy-loaded translations, signal-based reactivity, full TypeScript support. Efficient, flexible, and scalable internationalization for Angular projects.

License

Notifications You must be signed in to change notification settings

antimprisacaru/ng-intl

Repository files navigation

Angular Internationalization

Type-Safe and Reactive Translations for Angular

ng-intl revolutionizes Angular internationalization with type-safety, IDE intellisense, and signal-based reactivity.

🚀 Efficient: Lazy-load bundled translations without HTTP requests.

🔍 Type-Safe: Full TypeScript and IDE intellisense support.

Reactive: Signal-based for seamless language switching.

🔧 Flexible: Supports both JSON and TypeScript translation files.

🌐 Scalable: Ideal for projects of all sizes.

Installation

npm install @ng-intl/core

Quick Start

  1. Configure the translation service:
import { provideTranslation } from '@ng-intl/core';

providers: [
  provideTranslation({ defaultLanguage: 'en' })
]
  1. Set up your translations:
import { createScopedTranslation, LanguageService } from '@ng-intl/core';

const { TranslationService, provideScopedTranslation } = createScopedTranslation({
  en: () => import('./i18n/en.json'),
  es: () => import('./i18n/es'),
  fr: () => import('./i18n/fr.json')
});
  1. Use in your component:
@Component({
  selector: 'app-root',
  template: `
    <h1>{{ translations()?.appTitle }}</h1>
    <p>{{ translations()?.welcomeMessage | interpolate: { username: currentUser } }}</p>
    <button (click)="changeLanguage('en')">{{ translations()?.languages.english }}</button>
    <button (click)="changeLanguage('es')">{{ translations()?.languages.spanish }}</button>
    <button (click)="changeLanguage('fr')">{{ translations()?.languages.french }}</button>
  `,
  providers: [provideScopedTranslation()]
})
export class AppComponent {
  protected readonly translations = inject(TranslationService).translations;
  private readonly languageService = inject(LanguageService);

  currentUser = 'John Doe';

  protected changeLanguage(lang: 'en' | 'es' | 'fr') {
    this.languageService.setLanguage(lang);
  }
}

Features

  • Lazy Loading: Translations are bundled but loaded on-demand, optimizing performance without extra HTTP requests.
  • Signal-Based Reactivity: Translations use Angular signals for perfect reactivity on language changes.
  • Intellisense Support: Enjoy unparalleled IDE support with autocompletion and type checking for translation keys.
  • Dynamic Language Switching: Easily switch languages at runtime with built-in language management.
  • Powerful Interpolation: Handle complex scenarios with variable interpolation, pluralization, and conditional content.
  • Scoped Translations: Organize translations efficiently with scoped services for different parts of your application.

InterpolationPipe

The InterpolationPipe offers versatile string interpolation and localization:

<!-- Simple interpolation -->
{{ 'Hello, {{name}}!' | interpolate:{ name: 'World' } }}

<!-- Select rule -->
{{ 'mySelectRule: "{gender, select, male {He} female {She} other {They}}"' | interpolate:{ gender: 'female' } }}

<!-- Plural rule -->
{{ 'myPluralRule: "{count, plural, =0 {no results} one {1 result} other {# results}}"' | interpolate:{ count: 5 } }}

The pipe supports nested rules, whitespace handling, fallbacks, and various data types, making it suitable for complex internationalization scenarios.

License

MIT

About

Type-safe, reactive Angular i18n library. Lazy-loaded translations, signal-based reactivity, full TypeScript support. Efficient, flexible, and scalable internationalization for Angular projects.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages