I18N.md

ngx-onboarding I18N

I18n of onboarding controls

Besides your own contents in "onboarding.json" files you might want to adjust translations of the component labels. Here are two examples how this can be done.

Example for using ngx-translate

If you are "already" using ngx-translate the integration is quite simple: Add the following snippet to the module where you configure your TranslateModule.forRoot

providers: [
    OnboardingService, 
    {
        provide: TranslatorBaseService, useExisting: TranslateService
    }]

Then you have to provide the key value pairs for the translations .e.g if you have a I18n folder with en.json and de.json they would contain at least these keys:

i18n/en.json file

{
  "ONBOARDING": "Onboarding",
  "ONBOARDING_FAILED_TO_LOAD_USER_SETTINGS": "Failed to load onboarding settings.",
  "ONBOARDING_FAILED_TO_SAVE_USER_SETTINGS": "Failed to save onboarding settings.",
  "ONBOARDING_GOT_IT_MSG": "Got it",
  "ONBOARDING_DO_NOT_SHOW_AGAIN_MSG": "Turn off",
  "ONBOARDING_NEXT_MSG": "Next",
  "ONBOARDING_ENABLE": "Turn on",
  "ONBOARDING_DISABLE": "Turn off",
  "ONBOARDING_CLEAR": "Reset"
}

i18n/de.json file

{
  "ONBOARDING": "Onboarding",
  "ONBOARDING_FAILED_TO_LOAD_USER_SETTINGS": "Fehler beim Laden der Onboarding Einstellungen.",
  "ONBOARDING_FAILED_TO_SAVE_USER_SETTINGS": "Fehler beim Speichern der Onboarding Einstellungen.",
  "ONBOARDING_GOT_IT_MSG": "Ich habs",
  "ONBOARDING_DO_NOT_SHOW_AGAIN_MSG": "Ausschalten",
  "ONBOARDING_NEXT_MSG": "Weiter",
  "ONBOARDING_ENABLE": "Einschalten",
  "ONBOARDING_DISABLE": "Ausschalten",
  "ONBOARDING_CLEAR": "Zurücksetzen"
}

Example for a "custom" translator service

First implement a translator service that derives from TranslatorBaseService. It has to implement one method, one property and one eventhandler.

/**
 * Example implementation of translation service
 */
import {TranslatorBaseService} from 'ngx-onboarding';
import {EventEmitter} from '@angular/core';

export class MyTranslatorService implements TranslatorBaseService {
     /**
     * implement an EventEmitter with the language key as one its arguments
     * the EventEmitter argument has one required property lang: string (where lang is the new language code)
     */
    public onLangChange: EventEmitter<{ lang: string }> = new EventEmitter<{ lang: string }>();
    private lastLang;

    constructor() {
        this.lastLang = 'en';
        this.onLangChange.subscribe((eventArgument) => {
            this.lastLang = eventArgument.lang;
        });
    }

    /**
     * Returns a translation instantly from the internal state of loaded translation.
     * The keys you have to react to are (with translation examples in english) are
     'ONBOARDING': 'Onboarding',
     'ONBOARDING_FAILED_TO_LOAD_USER_SETTINGS': 'Failed to load onboarding settings.',
     'ONBOARDING_FAILED_TO_SAVE_USER_SETTINGS': 'Failed to save onboarding settings.',
     'ONBOARDING_GOT_IT_MSG': 'Got it',
     'ONBOARDING_DO_NOT_SHOW_AGAIN_MSG': 'Turn off',
     'ONBOARDING_NEXT_MSG': 'Next',
     'ONBOARDING_ENABLE': 'Turn on',
     'ONBOARDING_DISABLE': 'Turn off',
     'ONBOARDING_CLEAR': 'Reset'
     */
    public instant(key: string): string {
        /* provide your own mechanism of resolving translations here */
        /* the following is a very primitive example to explain the concept*/
        switch (this.lastLang) {
            case 'en':
                switch (key) {
                    case 'ONBOARDING':
                        return 'Onboarding';
                    case 'ONBOARDING_FAILED_TO_LOAD_USER_SETTINGS':
                        return 'Failed to load onboarding settings.';
                    case 'ONBOARDING_FAILED_TO_SAVE_USER_SETTINGS':
                        return 'Failed to save onboarding settings.';
                    case 'ONBOARDING_GOT_IT_MSG':
                        return 'Got it';
                    case 'ONBOARDING_DO_NOT_SHOW_AGAIN_MSG':
                        return 'Turn off';
                    case 'ONBOARDING_NEXT_MSG':
                        return 'Next';
                    case 'ONBOARDING_ENABLE':
                        return 'Turn on';
                    case 'ONBOARDING_DISABLE':
                        return 'Turn off';
                    case 'ONBOARDING_CLEAR':
                        return 'Reset';
                }
                break;
            case 'de': {
                switch (key) {
                    case 'ONBOARDING':
                        return 'Onboarding';
                    case 'ONBOARDING_FAILED_TO_LOAD_USER_SETTINGS':
                        return 'Fehler beim Laden der Onboarding Einstellungen.';
                    case 'ONBOARDING_FAILED_TO_SAVE_USER_SETTINGS':
                        return 'Fehler beim Speichern der Onboarding Einstellungen.';
                    case 'ONBOARDING_GOT_IT_MSG':
                        return 'Ich habs';
                    case 'ONBOARDING_DO_NOT_SHOW_AGAIN_MSG':
                        return 'Ausschalten';
                    case 'ONBOARDING_NEXT_MSG':
                        return 'Weiter';
                    case 'ONBOARDING_ENABLE':
                        return 'Einschalten';
                    case 'ONBOARDING_DISABLE':
                        return 'Ausschalten';
                    case 'ONBOARDING_CLEAR':
                        return 'Zurücksetzen';
                }
            }
        }
        return key;
    }
    /**
     * The language (code) currently used
     */
    public get currentLang(): string {
        return this.lastLang;
    }
}

It is totally up to you which language code system you use (e.g. ISO 639-1 or ISO-639). You just have to adapt your own service to the standard you want to use.

After that you have to provide your custom translatorservice for TranslatorBaseService in your "root" module .e.g AppModule

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        OnboardingModule,
        HttpClientModule
    ],
    providers: [
        OnboardingService,        
        {
            provide: TranslatorBaseService, useClass: MyTranslatorService
        }],
    bootstrap: [AppComponent]
})
export class AppModule {
}