Create Angular Applications using ngx-Translate

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>  
  4.   
  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

Recommended Ebook

Angular 7 - For Beginners

Download Now!
Similar Articles