@softwarepioniere/language

HOW TO USE

Installation

Run

npm i @ngrx/store --save
npm i ngrx-store-localstorage@7.0.0 --save
npm i @ngx-translate/core@11.0.1 --save
npm i @ngx-translate/http-loader@4.0.0 --save
npm i ngx-translate-messageformat-compiler@4.4.0 --save
npm i ngx-translate-multi-http-loader@3.0.0 --save
npm i messageformat@2.1.0 --save
npm i typescript@3.2.4 --save
npm i @softwarepioniere/language --save

Configuration

app.module.ts

imports: [
    ...
    LanguageModule.forRoot(),
    ...

Sample implementation

The following code are available on github.

language-test.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import {LanguageTestRoutingModule} from './language-test-routing.module';
import {LanguageSwitcherComponent} from './language-switcher/language-switcher.component';
import {MatButtonModule} from '@angular/material';
import {TranslateCompiler, TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {HttpClient} from '@angular/common/http';
import {MultiTranslateHttpLoader} from 'ngx-translate-multi-http-loader';
import {TranslateMessageFormatCompiler} from 'ngx-translate-messageformat-compiler';


export function HttpLoaderFactory(http: HttpClient) {
    return new MultiTranslateHttpLoader(http, [
        {prefix: './assets/i18n/language/', suffix: '.json'},
    ]);
}

@NgModule({
    imports: [
        CommonModule,
        LanguageTestRoutingModule,
        TranslateModule.forRoot({
            compiler: {
                provide: TranslateCompiler,
                useClass: TranslateMessageFormatCompiler
            },
            loader: {
                provide: TranslateLoader,
                useFactory: (HttpLoaderFactory),
                deps: [HttpClient]
            }
        }),
        MatButtonModule
    ],
    declarations: [LanguageSwitcherComponent]
})

export class LanguageTestModule {
}

language-switcher.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import {getCurrentLanguage, getTranslationInfoSichtbar, LanguageState, SpracheSetzenAction, ToggleTranslationInfoAction} from '@softwarepioniere/language';
import {select, Store} from '@ngrx/store';
import {Observable, Subscription} from 'rxjs';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app-language-switcher',
    templateUrl: './language-switcher.component.html',
    styleUrls: ['./language-switcher.component.css']
})
export class LanguageSwitcherComponent implements OnInit, OnDestroy {
    lang$: Observable<string>;
    translationInfoSichtbar$: Observable<boolean>;
    langSubscription: Subscription;

    constructor(
        private translate: TranslateService,
        private langStore: Store<LanguageState>
    ) {
    }

    ngOnInit() {
        this.translationInfoSichtbar$ = this.langStore.pipe(select(getTranslationInfoSichtbar));
        this.lang$ = this.langStore.pipe(select(getCurrentLanguage));
        this.langSubscription = this.lang$.subscribe(lang => {
                this.translate.use(lang);
            }
        );
    }

    ngOnDestroy() {
        this.langSubscription.unsubscribe();
    }


    async switchLanguage(language: string) {
        await this.langStore.dispatch(new SpracheSetzenAction(language));
    }

    async toggleTranslationInfo() {
        await this.langStore.dispatch(new ToggleTranslationInfoAction());
    }
}

language-switcher.component.html

<p>
    Current Language: {{lang$|async}}
</p>

<button mat-button (click)="toggleTranslationInfo()">
    <p>toggle translation info</p>
</button>
<br />
<button mat-button (click)="switchLanguage('de')" *ngIf="(lang$|async) !== 'de'">
    <p translate>BTN_GERMAN</p>
    <p style="font-size: small;" *ngIf="translationInfoSichtbar$|async">BTN_GERMAN</p>
</button>
<button mat-button (click)="switchLanguage('pl')" *ngIf="(lang$|async) !== 'pl'">
    <p translate>BTN_POLISH</p>
    <p style="font-size: small;" *ngIf="translationInfoSichtbar$|async">BTN_POLISH</p>
</button>
<button mat-button (click)="switchLanguage('en')" *ngIf="(lang$|async) !== 'en'">
    <p translate>BTN_ENGLISH</p>
    <p style="font-size: small;" *ngIf="translationInfoSichtbar$|async">BTN_ENGLISH</p>
</button>

Translation files

To translate the translation keys, the app module or page module must load the translation files like...

language-test.module.ts

export function HttpLoaderFactory(http: HttpClient) {
    return new MultiTranslateHttpLoader(http, [
        {prefix: './assets/i18n/language/', suffix: '.json'},
    ]);
}

@NgModule({
    imports: [
        ...
        TranslateModule.forRoot({
            compiler: {
                provide: TranslateCompiler,
                useClass: TranslateMessageFormatCompiler
            },
            loader: {
                provide: TranslateLoader,
                useFactory: (HttpLoaderFactory),
                deps: [HttpClient]
            }
        }),
        ...
    ]
   ,
   ...
})

export class LanguageTestModule {
}

The translation files you find here.