@ngx-translate/core

What is @ngx-translate/core?

@ngx-translate/core is an internationalization (i18n) library for Angular applications. It allows developers to easily translate their applications into different languages and manage translations dynamically.

What are @ngx-translate/core's main functionalities?

Basic Translation

This feature allows you to set a default language and use a specific language for translations. The 'translate' pipe is used in the template to translate keys.

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {
  this.translate.setDefaultLang('en');
  this.translate.use('en');
}

// In your template
// <p>{{ 'HELLO' | translate }}</p>

Dynamic Language Switching

This feature allows users to switch languages dynamically at runtime. The 'use' method of TranslateService is used to change the language.

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {}

switchLanguage(language: string) {
  this.translate.use(language);
}

// In your template
// <button (click)="switchLanguage('en')">English</button>
// <button (click)="switchLanguage('fr')">French</button>

Loading Translations from JSON Files

This feature allows you to load translations from external JSON files. The TranslateHttpLoader is used to load translation files from a server.

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ]
})
export class AppModule {}

Translation Parameters

This feature allows you to pass parameters to translation strings. The parameters can be used to dynamically insert values into the translated text.

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {}

// In your template
// <p>{{ 'HELLO_USER' | translate: { value: 'John' } }}</p>

Other packages similar to @ngx-translate/core

ngx-i18n

ngx-i18n is another Angular library for internationalization. It provides similar functionalities to @ngx-translate/core, such as dynamic language switching and loading translations from external files. However, it may have a different API and configuration options.

angular-translate

angular-translate is a popular AngularJS library for internationalization. It offers features like asynchronous loading of translation files, dynamic language switching, and translation interpolation. While it is designed for AngularJS, it has inspired many features in @ngx-translate/core.

i18next

i18next is a powerful internationalization framework for JavaScript applications. It supports various frameworks, including Angular, and offers features like language detection, pluralization, and context-based translations. It is more versatile and can be used outside of Angular as well.

README

@ngx-translate/core

Overview

@ngx-translate/core is the primary internationalization (i18n) library for Angular
applications, allowing developers to easily implement and manage multiple languages
in their projects. With @ngx-translate/core, you can dynamically switch languages
within the app, seamlessly adapting content to suit various locales.

Documentation

• Official Documentation
• Getting Started Tutorial: How to Translate Your Angular App with NGX-Translate