Angular nyelv választó

Angularban nyelv választót készítünk. Ez a "tutorial" valójában a leírás alján található link alapján készült, gyakorlatilag saját értelmezése/fordítása a linknek. A célom, hogy nyelvi fájlokat olvassunk fel amikből fordítjuk le az elemeket. Lehetne adatbázist is használni, de én most nyelvi fájlokat fogok készíteni.
Hozzunk létre egy mappát a nyelvi fájloknak. Ide: /src/assets/i18n/

Majd ide készítettem egy hu.json: 
{
  "Home": "Kezdőoldal",
  "edit": "Módosít"
}

en.json: 
{
  "Home": "Home",
  "edit": "Edit"
}

Generáljunk egy service-t a fordításnak: 
# ng g service translate --module=app

A constuctor-ban levő rész csak akkor szükséges, ha az alkalmazásba bejelentkezés nélkül is szeretnénk nyelvet cserélni. A default nyelvet magyarra állítottuk azzal, hogy azt húzzuk be alapból. Elmentjük localstorage-ba a kiválasztott nyelvet. A httpClient.get függvénnyel tudtuk olvasni a fájlokat.
TranslateService Tartalma: 
import {Injectable} from '@angular/core';
import {HttpClient,HttpBackend } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class TranslateService {

    private httpClient: HttpClient;

    data: any = {};

    // interceptor nem fut rá
    constructor(handler: HttpBackend) {
        this.httpClient = new HttpClient(handler);
    }

    use(lang: string): Promise<{}> {
        return new Promise<{}>((resolve, reject) => {
            const langPath = `../assets/i18n/${lang || 'hu'}.json`;

            localStorage.setItem('locale',lang);

            this.httpClient.get<{}>(langPath).subscribe(
                translation => {
                    this.data = Object.assign({}, translation || {});
                    resolve(this.data);
                },
                error => {
                    this.data = {};
                    resolve(this.data);
                }
            );
        });
    }
}

Az app.module.ts fájlba importáljuk be szükséges modulokat/service-eket. Tegyük be a providerek közzé a service-ünket: 
import { NgModule, APP_INITIALIZER } from '@angular/core';
import {HttpClientModule, HTTP_INTERCEPTORS} from "@angular/common/http";
import {TranslateService} from './modules/core/services/translate.service';
import {TranslatePipe} from './modules/core/components/translate/translate.pipe';

export function setupTranslateFactory(service: TranslateService): Function {
    return () => service.use('hu');
}


@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    HttpClientModule
  ],
  providers: [
    ...
    TranslateService,
    {
        provide: APP_INITIALIZER,
        useFactory: setupTranslateFactory,
        deps: [TranslateService],
        multi: true
    }
    ...
  ],

  ...
})

export class AppModule { }

Ahol használni szeretnénk majd a nyelv választás abban a component-ben konstruktorban tegyük be a paraméterlistába és hozzunk létre két funkciót. Az aktuális nyelv lekérdezéséhez( a localestorage-ból kérdezzük le) és a választott nyelv beállításához( a service-ünk funkcióját hívjuk amit feljebb megírtunk): 
    constructor(private translate: TranslateService) {
    }

    setLang(lang: string) {
        this.translate.use(lang);
    }

    getLang() {
        this.locale = localStorage.getItem('locale');
        return this.locale;
    }

Készítsünk egy újabb service-t ahhoz, hogy a view-kban egyszerűen be tudjuk állítani, hogy melyik szöveget kell fordítania az angularnak 
# ng g pipe translate --module=app
Tartalma: 
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from './translate.service';

@Pipe({
  name: 'translate',
  pure: false
})
export class TranslatePipe implements PipeTransform {

  constructor(private translate: TranslateService) {}

  transform(key: any): any {
    return this.translate.data[key] || key;
  }

}

Végül pedig egy példa view ahol egy navbar-ra tesszük ki a nyelv választó linkeket és lefordítja egy menüpontunk nevét: 
<nav class="navbar navbar-expand-lg ">

    <a class="navbar-brand pull-left" href="#"> {{ 'Home' | translate }} </a>

    <ul class="nav nav-pills">

        <li *ngIf="getLang()=='en'" class="nav-item navbar-right">
            <a class="nav-link" (click)="setLang('hu')">HU</a>
        </li>
        <li *ngIf="getLang()=='hu'" class="nav-item navbar-right">
            <a class="nav-link" (click)="setLang('en')">EN</a>
        </li>
    </ul>
</nav>

https://medium.com/@DenysVuika/simple-i18n-support-for-your-angular-apps-6138a47eb2a9
2018.12.08.