Angular 2 translation change language in application

Solution 1:

The best way to change language globally is to use pipes and send the language parameter as an argument.

This would automatically change the Language across the components where the language pipe is utilized.

The following example can be used to supply multiple languages at a time and can be used to change Language dynamically with a single click

for example:

// **language.pipe.ts**

import { Pipe, PipeTransform, OnInit, OnChanges } from '@angular/core';
import { LanguageService } from '../services/language.service';

@Pipe({
    name: 'language'
})
export class LanguagePipe implements PipeTransform {

    constructor(
        public lang: LanguageService
    ) { }

    transform(value: string, args?: any): any {
        return this.lang.getLang(value);
    }
}

// **language.service.ts**

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class LanguageService {

    selectedLanguage = 'ch';
    segmentsNames: any = {};
    constantSegmentNames: any = {};
    language = {
        undefined: { 'en': '', 'ch': '' },
        null: { 'en': '', 'ch': '' },
        '': { 'en': '', 'ch': '' },
        'hello': { 'en': 'Hello', 'ch': '你好' },
        'world': { 'en': 'World', 'ch': '世界' }
    };

    constructor(private _http: HttpClient) { }

    getLang(value: string, args?: any): any {
        if (this.language[value]) {
            return this.language[value][this.selectedLanguage];
        }
        return value;
    }

    /**
     * @function that is used to toggle the selected language among 'en' and 'ch'
     */
    changeLanguage() {
        if (this.selectedLanguage === 'en') {
            this.selectedLanguage = 'ch';
        } else {
            this.selectedLanguage = 'en';
        }
    }
}

Now Import

Language Pipe at App Module Level for it to be available across the app or import it in the common module as you require

// **app.module.ts**
import { NgModule } from '@angular/core';
import { LanguagePipe } from '../pipes/language.pipe';
import { APP_INITIALIZER } from '@angular/core';
import { AppConfig } from '../config.service';

export function initializeApp(appConfig: AppConfig) {
  return () => appConfig.load();
}

@NgModule({
  imports: [],
  exports: [
    LanguagePipe,
  ],
  declarations: [
    LanguagePipe,
  ],
  providers: [
    AppConfig,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppConfig], multi: true
    }
  ]
})
export class AppModule { }

Use the language service at the component level where ever the translation is required

// **header.component.ts**
import { Component, OnInit } from '@angular/core';
import { UserService } from '../login/user.service';
import { Router } from '@angular/router';
import { LanguageService } from '../services/language.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  toolName = 'test';
  currentUser: string;
  isLoginPage = true;
  constructor(
    public userService: UserService,
    private router: Router,
    public lang: LanguageService
  ) { }

  ngOnInit() {
  }
}

Use Language Pipe in HTML as

//**header.component.html**
<strong>{{'hello' | language:lang.selectedLanguage}}{{'world' | language:lang.selectedLanguage}}</strong>