Angular 6 : Multi Language Usage

Angular 6 : Multi Language Usage

We can use multi languages in Angular 6, here I explained step by steps.

Steps, how to use it.

Step 1

Install required packages

npm install @ngx-translate/core --save
npm install ngx-translate-http-loader --save

  

Step 2

Configuration

Create folder "i18n" in "assets" folder
Create language specific file like., en.json, gu.json, hn.json as many you have language
And store language specific value in .json file as below

en.json

{
    "Product": {
        "ProductName": "Name",  
        "ProductPrice": "Price"        
    }
}

  

gu.json

{
    "Product": {
        "ProductName": "નામ",  
        "ProductPrice": "કિંમત"        
    }
}

  

hn.json

hn.json
{
    "Product": {
        "ProductName": "नाम",  
        "ProductPrice": "किम्मत"        
    }
}

  

Step 3

app.module.ts

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

  

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

  

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule, 
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [RecordsService],
  bootstrap: [AppComponent]
})

  

Step 4

app.component.ts

import { Component, ElementRef } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
showLoadingIndicator = true;

constructor(private router : Router, private route: ActivatedRoute, private eleRef: ElementRef,public translate: TranslateService ) { 
  //language start
  const langsArray: string[] = ['en', 'gu', 'hn'];
    translate.addLangs(langsArray);
      translate.setDefaultLang('en');
      let profileLanguage = this.eleRef.nativeElement.getAttribute('language');
    const browserLang: string =  translate.getBrowserLang();
    
    let UserLanguage = localStorage.getItem('UserLanguage'); 
    if(UserLanguage != null)
    {
      translate.use(UserLanguage);
    }
    else{
      if (profileLanguage) {
        translate.use(profileLanguage);
      } else {
        translate.use(langsArray.includes(browserLang) ? browserLang : 'en');
      }
    }    
  //language end  
}

  changeLanguage(lang) : void{     
    localStorage.setItem('UserLanguage', lang);
    this.translate.use(lang);
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    this.router.onSameUrlNavigation = 'reload';
    this.router.navigate([this.router.url]);
  }
}

  

Step 5

app.component.html

 <select #langselect (change)="changeLanguage(langselect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang">{{lang}}</option>
 </select>

  

Step 6

how to use language specific value

<h1>
    {{ 'Product.ProductName' | translate }}
</h1>
<h2>
    {{ 'Product.ProductPrice' | translate }}
</h2>

  

Hope this will help you and save your time.

Enjoy !!!

:)