Several client libraries are provided to support sending API requests to Singleton service. Each library, when integrated on the client side, also provides additional features such as post-processing of localized resources and caching.

Below are details on how to use the library for Angular clients.

• Run the Singleton service by following the instructions in here.
• Ensure the following are installed and compatible with Angular:
  • Git
  • Node.js 10

• Install the library

  npm install @singleton-i18n/angular-client --save

• Configure your source bundle :

  export const ENGLISH = {
     'application.title': 'Welcome to Singleton Angular sample application!',
     'demo.string.description': 'Singleton Angular client supports both {0} and {1}.',
     'demo.plural.users': '{0, plural, one {Singleton Angular client has a user.} other {Singleton Angular client has # users.}}'
  };

• Configure your main module file (app.module.ts) :

  ...
  import { NgModule, APP_INITIALIZER } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  import { VIPModule, VIPService, LocaleService, PatternCategories, getBrowserCultureLang } from '@singleton-i18n/angular-client';
  import { ENGLISH } from './app.l10n';
  
  export function initVIPConfig(service: VIPService, localeService: LocaleService) {
     // Get the browser's language by replacing 'es' with getBrowserCultureLang()
     localeService.init('es');
     return () => service.initData({
        productID: 'SingletonSample',
        component: 'default',
        version: '1.0.0',
        i18nScope: [
           PatternCategories.DATE,
           PatternCategories.NUMBER,
           PatternCategories.CURRENCIES
        ],
        host: 'https://localhost:8090/',
        isPseudo: false,
        collectSource: false,
        sourceBundle: ENGLISH,
        timeout: 5000
     });
  }
   
  @NgModule({
     imports: [
        ...
        HttpClientModule,
        VIPModule.forRoot(),
        ...
     ],
     providers: [
        ...
        {
           provide: APP_INITIALIZER,
           useFactory: initVIPConfig,
           deps: [
              VIPService,
              LocaleService
           ],
           multi: true
        }
        ...
     ],
     bootstrap: [AppComponent]
  })
  export class AppModule {}

  Note: The settings above have been preconfigured to work with default Singleton service settings (See Prerequisites). Change the properties inside service.initData as needed. Locale has been preconfigured to 'es' to demonstrate Spanish translation. Change it to get the browser's locale by replacing 'es' with getBrowserCultureLang().

L10nPlus Pipe:

{{ 'application.title'| vtranslate }}
// output: Welcome to Singleton Angular sample application!

{{ 'demo.plural.users'| vtranslate: 1 }}
// output: Singleton Angular client has a user.

L10n Directive:

<span l10n='application.title'></span>
// output: Welcome to Singleton Angular sample application!

Date Time Formatting Pipe:

// component.ts: this.date = new Date();
{{ date | dateFormat: 'medium'}} // output: 'Jul 23, 2019, 2:41:24 PM'

Number Formatting Pipe:

{{ 123456789 | numberFormat }} // output: '123,456,789'

Currency Formatting Pipe:

{{ 1.149999 | currencyFormat: 'JPY' }} // output: '¥1'

Percent Formatting Pipe:

{{ 0.1 | percentFormat }} // output: '10%'

• I18n data initialization
  • load data before application start
  • load data async
• Locale management
• Get translation
  • l10n pipe
  • l10n directive
  • l10n service
• Formatting strings
  • date formatting pipe
  • number formatting pipe
  • currency formatting pipe
  • I18n service
• Lazy loading compliant
• Share module support
• Independent module support (Angular lib support)
• Source collection
• Stream APIs
• Offline mode support
• Loader customization

• A sample application is provided here

  Note: To ensure correct UI display, please run the Singleton service locally and configure its URL in your app.module.ts file (eg. host: 'https://localhost:8090/').