@nwx/i18n

@nwx/i18n

A simple translation module for Angular applications

How to install

npm i @nwx/i18n |OR| yarn add @nwx/i18n

How to use

// In your environment{prod,staging}.ts

import { AppCfg, TargetPlatform, HttpMethod } from '@nwx/cfg';
import { LogLevels } from '@nwx/logger';

export const environment: AppCfg = {
  // app name
  appName: 'Neekware',
  // target (browser, mobile, desktop)
  target: TargetPlatform.web,
  // production, staging or development
  production: false,
  // one or more app specific field(s)
  log: {
    // Log level, (default = none)
    level: LogLevels.info
  },
  i18n: {
    // available languages
    availableLanguages: {
      en: {
        name: 'English',
        locale: '@angular/common/locales/en',
        localeExtra: '@angular/common/locales/extra/en'
      },
      fr: {
        name: 'Français',
        locale: '@angular/common/locales/fr',
        localeExtra: '@angular/common/locales/extra/fr'
      },
      de: {
        name: 'Deutsch',
        locale: '@angular/common/locales/de',
        localeExtra: '@angular/common/locales/extra/de'
      }
    },
    // enabled languages (iso list)
    enabledLanguages: [
      // order is important
      'en',
      'fr'
    ],
    // cache busting hash
    // bump when you change any file in /assets/i18n/*.json
    cacheBustingHash: 'v1.0.0'
  }
};

// In your app.module.ts

import { CfgModule } from '@nwx/cfg';
import { LoggerModule } from '@nwx/logger';
import { I18nModule } from '@nwx/i18n';

import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CfgModule.forRoot(environment), // make the environment injectable
    LoggerModule,
    I18nModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

// In your app.component.ts
import { Component } from '@angular/core';
import { CfgService, DefaultCfg } from '@nwx/cfg';
import { LogService } from '@nwx/logger';
import { I18nService } from '@nwx/i18n';

@Component({
  selector: 'app-root',
  template: `<h1>{{'COMMON.WELCOME' | translate}} to {{ title }}!</h1>`
})
export class AppComponent {
  title = 'Neekware';
  constructor(public cfg: CfgService, public log: LogService, public i18n: I18nService) {
    this.title = this.cfg.options.appName;
    this.i18n.setCurrentLanguage('fr'); // set language to French
    this.log.info('AppComponent loaded ...');
  }
}

Include your translated files in the /assets/i18n directory of your application.

/assets/i18n/en.json

{
  "COMMON.WELCOME": "Welcome",
  "COMMON.ABOUT": "About"
}

/assets/i18n/fr.json

{
  "COMMON.WELCOME": "Bienvenue",
  "COMMON.ABOUT": "Sur"
}

Advanced usage:

// In your app.component.ts
import { Component } from '@angular/core';
import { CfgService, DefaultCfg } from '@nwx/cfg';
import { LogService } from '@nwx/logger';
import { I18nService } from '@nwx/i18n';

@Component({
  selector: 'app-root',
  template: `<h1>{{'COMMON.WELCOME' | translate}} to {{ title }}!</h1>`
})
export class AppComponent {
  direction = 'ltr';
  title = 'Neekware';
  constructor(public cfg: CfgService, public log: LogService, public i18n: I18nService) {
    this.title = this.cfg.options.appName;

    // translate in ts files
    i18n.xlate.get('COMMON.WELCOME').subscribe((res: string) => {
      this.log.info(res);
    });

    // check if language is Right2Left `rtl`
    if (i18n.isLanguageRTL('he')) {
      this.direction = 'rtl';
    }

    // change the language
    i18n.setCurrentLanguage('fr');

    // available properties
    // direction
    // currentLanguage
    // defaultLanguage
    // enabledLanguages

    // available methods
    // isCurrentLanguage(iso)
    // getLanguageName(iso)
    // getLanguageDirection(iso)
    // isLanguageEnabled(iso)
  }
}

// In your shared.module.ts

import { I18nSharedModule } from '@nwx/i18n';

@NgModule({
  declarations: [SharedComponent],
  imports: [CommonModule, I18nSharedModule)],
})
export class SharedModule {}

// In your lazy.module.ts

import { SharedModule } from './shared';

@NgModule({
  declarations: [LazyComponent],
  imports: [CommonModule, SharedModule]
})
export class LazyModule {}

Note:

1. @nwx/i18n uses the great @ngx-translate package under the hood.

Running the tests

To run the tests against the current environment:

npm run ci:all

License

Released under a (MIT) license.

Version

X.Y.Z Version

`MAJOR` version -- making incompatible API changes
`MINOR` version -- adding functionality in a backwards-compatible manner
`PATCH` version -- making backwards-compatible bug fixes