Internationalization (i18n) is an essential aspect of modern web development, enabling applications to reach a global audience by supporting multiple languages and locales. Angular, a popular JavaScript framework, provides robust tools and libraries to facilitate i18n implementation. In this article, we will explore how I set up i18n in Angular using the ngx-translate library, a versatile solution that simplifies the process of translating and localizing Angular applications.
Step 1: Install ngx-translate
To get started, we need to install the ngx-translate library. Open a terminal window and navigate to your Angular project directory. Execute the following command:
npm install @ngx-translate/core @ngx-translate/http-loader --save
This command installs both the core ngx-translate library and the http-loader, which is necessary for loading translation files.
Step 2: Configure ngx-translate
Next, we need to configure ngx-translate in our Angular project. In the app.module.ts
file, import the necessary modules and configure the translation loader. Add the following code to the imports section:
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http);
} @NgModule({ imports: [ HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ], })
export class AppModule { }
In the above code, we import the necessary modules from ngx-translate and HttpClientModule from @angular/common/http
. We also define the HttpLoaderFactory
function that will be used to load translation files through the http-loader.
Step 3: Create Translation Files
Now, let’s create the translation files for the supported languages. Inside the src/assets/i18n
directory, create a separate JSON file for each language you want to support. For example, create en.json
for English, es.json
for Spanish, and so on. These files should contain key-value pairs, where the keys represent the translation keys and the values hold the translated text. Here’s an example of the structure:
{ "welcome": "Welcome to my app!", "greeting": "Hello, {name}!"
}
{ "welcome": "¡Bienvenido a mi aplicación!", "greeting": "¡Hola, {name}!"
}
Step 4: Implement Translation in the Application
Now that we have set up ngx-translate and created the translation files, we can start using translations in our Angular components. Let’s assume we have a component called AppComponent
. In the app.component.ts
file, import the necessary ngx-translate modules:
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-root', template: ` <h1>{{ 'welcome' | translate }}</h1> <p>{{ 'greeting' | translate: { name: 'John' } }}</p> `
})
export class AppComponent { constructor(private translate: TranslateService) { translate.setDefaultLang('en'); }
}
In the above code, we import the TranslateService
from ngx-translate and inject it into the AppComponent
. By using the translate
pipe, we can easily
translate the desired text by passing the translation key. We can also pass dynamic values using the translate
pipe’s second argument.
Step 5: Switching Languages
Finally, let’s implement a language switcher to enable users to switch between different language options. Create a language switcher component (e.g., LanguageSwitcherComponent
) and add the following code:
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-language-switcher', template: ` <select (change)="switchLanguage($event.target.value)"> <option value="en">English</option> <option value="es">Español</option> </select> `
})
export class LanguageSwitcherComponent { constructor(private translate: TranslateService) { } switchLanguage(language: string) { this.translate.use(language); }
}
In the above code, we import the TranslateService
and inject it into the LanguageSwitcherComponent
. The switchLanguage
method is bound to the change
event of a <select>
element, allowing users to select a language. Upon language selection, the switchLanguage
method sets the chosen language using the translate.use()
function.
In this article, we explored how to set up i18n in Angular using the ngx-translate library. By following these steps, you can easily add language translation and localization to your Angular applications. ngx-translate provides a comprehensive and straightforward approach to handle i18n, empowering you to reach a wider global audience. So, start translating your application and make it accessible to users worldwide!
- SEO Powered Content & PR Distribution. Get Amplified Today.
- PlatoData.Network Vertical Generative Ai. Empower Yourself. Access Here.
- PlatoAiStream. Web3 Intelligence. Knowledge Amplified. Access Here.
- PlatoESG. Automotive / EVs, Carbon, CleanTech, Energy, Environment, Solar, Waste Management. Access Here.
- BlockOffsets. Modernizing Environmental Offset Ownership. Access Here.
- Source: https://www.codementor.io/anwarulislam/how-i-set-up-i18n-in-angular-with-ngx-translate-26d3bsf6un