Deep dive on Angular I18n with ngx-translate

Click for: original source

Learn how to internationalize Angular apps step by step with the help of ngx-translate, one of the most popular open-source libraries for i18n. By Ankit.

One of the most popular open-source i18n libraries, ngx-translate, lets you define translations for your app and switch between them dynamically. You can either use a service, directive, or pipe to handle the translated content. In this Angular 13 tutorial, we will learn how to use them all with the help of a small demo app.

For demonstration purposes, we will create a sample feedback form for Phrase, the most reliable software localization platform on the market, and launch our demo app in two different languages – English and German.

The article is very detailed and captures:

  • Why use ngx-translate instead of Angular i18n?
  • Configuring ngx-translate for an Angular app
  • Updating the AppModule
  • Creating a nav-bar component
  • Creating a model
  • Creating translation files
  • Using the translate pipe
  • Using the translate directive
  • Dynamic translation keys
  • Exploring TranslateService
  • Creating a Feedback Component

… and much more. There are Angular code examples with good explanation. Nice one!

[Read More]

Tags frontend angular nodejs javascript app-development