ngx-translate - Angular i18n Library

What’s new in v18

v18 rebuilds ngx-translate on Angular Signals. The peer dependency is Angular 18+. Highlights, in order of impact:

1. Signals everywhere. currentLang and fallbackLang are now Signal<Language | null>, and translations themselves are signal-backed. Read them straight in templates, computed(), and effect() — no subscriptions, no manual change detection.

2. Standalone translate() function. Returns a Signal<Translation> you can assign to a component field. Each argument (key, params, lang) accepts a plain value, an arrow function, or a signal — fully reactive.

3. *translateBlock structural directive. Exposes a typed t(key, params?) function to a template block. The clean replacement for the deprecated content-as-key pattern, ideal when several keys appear together.

4. Hierarchical services. provideChildTranslateService() creates a connected child whose translations fall back to the parent chain. Using provideTranslateService() again creates an isolated subtree with separate language state. Both work naturally with lazy-loaded routes.

5. Standalone by default. TranslateModule.forRoot/forChild are gone. Configure via provideTranslateService() and import TranslatePipe / TranslateDirective directly into a component’s imports.

The HTTP loader also gained built-in multi-resource loading and a permissive 404 default (failOnError: true restores v17 behavior).

Upgrading from v17? See the Migration Guide. Need to roll back? The migration guide has a rollback recipe. Still on v17? The previous docs remain available at /v17/.

Why ngx-translate is the Best Localization Library for Angular

ngx-translate is widely regarded as the leading localization library for Angular due to its flexibility, ease of use, and powerful runtime language-switching capabilities. You can dynamically switch languages in real-time without reloading your entire application, offering a seamless user experience.

Key Advantages of ngx-translate

• Dynamic Runtime Language Switching ngx-translate allows for effortless language switching at runtime. Your application immediately updates all text elements across the UI, ensuring a smooth and responsive experience for your users, no matter which language is selected.

• Lightweight Deployment Only the necessary language files are loaded from the server, minimizing overhead. Additional features can be integrated as plugins, keeping the core deployment small and optimized for performance.

• Ideal for Non-i18n Use Cases ngx-translate excels in scenarios where Angular’s built-in i18n system may not be suitable. For example, if you’re using a hybrid framework like Ionic or need more flexibility in how translations are handled, ngx-translate is the perfect alternative.

• Highly Modular and Extensible Built with modularity in mind, ngx-translate is easily extendable and can adapt to the unique needs of your project. Its flexible architecture makes it a great fit for a wide variety of Angular applications.

• Plugin Support for Advanced Features Extend ngx-translate with plugins that add powerful features, such as support for ICU-formatted messages, enabling more complex localization requirements for your app.

• Efficient Translation ID Extraction Easily extract translation IDs from both your code and templates, simplifying the localization process and making it easier to manage translation efforts.

• Comprehensive Tooling Various tools provide excellent support for managing ngx-translate, allowing you to edit and organize translation files across multiple languages in a user-friendly environment. This streamlines the translation management process, saving both time and effort.