Introduction

In this article, we will learn how to create angular applications using ngx-translate.
Steps:
Step 1
Create an Angular project setup using the below command or however you want to create it.
ng new projectname
Example:
ng new ngx-new
Create Angular Applications Using ngx-Translate
Step 2
Now, we must install @ngx-translate/core in our Angular app. Open a new terminal and run the below command.
npm i @ngx-translate/core
Create Angular Applications Using ngx-Translate
Now we can use ngx-translate in our Angular project. Then, we have to import TranslateModule.forRoot() in the root NgModule of your application.
  1. import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
TranslateModule.forRoot()
Step 3
Now, we must install @ngx-translate/http-loader in our Angular app. Open a new terminal and run the below command.
npm i @ngx-translate/http-loader
Create Angular Applications Using ngx-Translate
The TranslateHttpLoader uses HttpClient to load translations, it means that you have to import the HttpClientModule from @angular/common/http before the TranslateModule,
app.module.ts
  1. import {
  2. BrowserModule
  3. } from '@angular/platform-browser';
  4. import {
  5. NgModule
  6. } from '@angular/core';
  7. import {
  8. AppRoutingModule
  9. } from './app-routing.module';
  10. import {
  11. AppComponent
  12. } from './app.component';
  13. import {
  14. HttpClient,
  15. HttpClientModule
  16. } from '@angular/common/http';
  17. import {
  18. TranslateModule,
  19. TranslateLoader
  20. } from '@ngx-translate/core';
  21. import {
  22. TranslateHttpLoader
  23. } from '@ngx-translate/http-loader';
  24. export function HttpLoaderFactory(httpClient: HttpClient) {
  25. return new TranslateHttpLoader(httpClient);
  26. }
  27. @NgModule({
  28. declarations: [
  29. AppComponent
  30. ],
  31. imports: [
  32. BrowserModule,
  33. AppRoutingModule,
  34. HttpClientModule,
  35. TranslateModule.forRoot({
  36. loader: {
  37. provide: TranslateLoader,
  38. useFactory: HttpLoaderFactory,
  39. deps: [HttpClient]
  40. }
  41. })
  42. ],
  43. providers: [],
  44. bootstrap: [AppComponent]
  45. })
  46. export class AppModule {}
Step 4
Now, we can use folder assets, then whatever language we want to create a separate JSON.
In this article, we are doing two languages:
Create Angular Applications Using ngx-Translate
en.json
  1. {
  2. "Dashboard": {
  3. "Title": "welcome Angular 9",
  4. "Option": "Change language"
  5. }
  6. }
fr.json
  1. {
  2. "Dashboard": {
  3. "Title": "bienvenue Angular 9",
  4. "Option": "Changer la langue"
  5. }
  6. }
Step 5
Now, we can do some code in app.component.ts
TranslateService
We have to initialize some properties in the TranslateService. The best place to do this is probably in our app.component.ts
  1. import {
  2. TranslateService
  3. } from '@ngx-translate/core';
  4. constructor(public translate: TranslateService) {
  5. translate.addLangs(['en', 'fr']);
  6. translate.setDefaultLang('en');
  7. const browserLang = translate.getBrowserLang();
  8. translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  9. }
It will allows you to specify a fallback set of translations to use in case there are missing translations for the current language.
Translate.use(browserLang.match(/en|fr/) ? browserLang : 'en') - the service which is the current language to use for translations
Step 6
Now, we can do some code in app.component.html
  1. <div>
  2. <h3>{{ 'Dashboard.Title' | translate }}</h3>
  3. <div>
  5. {{ 'Dashboard.Option' | translate }}
  6. <select #langOption (change)="translate.use(langOption.value)">
  7. <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
  8. </select>
  9. </div>
  10. </div>
Step 7
Now, Run the application:
npm start
Create Angular Applications Using ngx-Translate
Step 8
Now, we will get the following output...
Create Angular Applications Using ngx-Translate