ngx-translate-wrapper-lib v1.0.6

NgxTranslateWrapper

This project was generated with Angular CLI version 7.0.3.

Readme might not display correctly on NPM, please read on Github

This is a wrapper for @ngx-translate library, please setup and install before using it. Then install with npm i ngx-translate-wrapper-lib

• NgxTranslateWrapper
  • Examples Usage for lib-i18n component
    • For format number
    • For format currency
    • For normal text, where data can be resource key from json, variable or just string
    • Use in HTML tag
    • For multiple parameters
      • with multiple formatting
    • Multilingual on same screen
    • Other available parameters for Date, Number and Currency
    • Right to Left language support

Table of contents generated with markdown-toc

Examples Usage for lib-i18n component

When format is not specified, default values will be used as shown as below:

• date: 26 October 2018 where the sequence will follow its locale
• currency: $120.95 where the separator will follow its locale, with 0 to 2 decimal places.

• number: 12,300 where the separator will follow its locale, with 0 to 3 decimal places

  For format number

  <lib-i18n [value]="numberOfPeople"
  type="number"
  [format]="{separators: false}"  ></lib-i18n>
  
  <lib-i18n [value]="numberOfPeople"
  type="number"  ></lib-i18n>

  For format currency

  <lib-i18n [value]="balance"
  type="currency"
  [format]="{currency: 'MYR'}" ></lib-i18n>
  
  <lib-i18n [value]="balance"
  type='currency' ></lib-i18n>

  For normal text, where data can be resource key from json, variable or just string

  New line character and HTML tag also will be interpreted.

  One concern for HTML tags interpretation is it might potentially caused cross-site scripting. The approach I used to enable new line characters and HTML tags interpretation is by binding variable into innerHTML, Angular recognises the value as unsafe and automatically sanitises it, which removes any tag, but remains the content of it and will render other HTML tags. Read more on Angular security

  <lib-i18n key="ACCOUNT_SUMMARY_TITLE"></lib-i18n>
  <lib-i18n key="hello"></lib-i18n>

  Use in HTML tag

  <button>
  <lib-i18n key="ACCOUNT_SUMMARY_TITLE"></lib-i18n>
  </button>

  For multiple parameters

  <lib-i18n key="EXAMPLE_MESSAGE" [params]="{
   'name': 'John',
   'date': {value: today, type: 'date'},
   'balance': {value: balance, type: 'currency'},
   'people': {value: numberOfPeople, type: 'number'}
   }" ></lib-i18n>

  with multiple formatting

  <lib-i18n key="EXAMPLE_MESSAGE" [params]="{
   'name': 'John',
   'date': {value: today, type: 'date', format:{timeZoneName: 'short'}},
   'balance': {value: balance, type: 'currency',
    format: {currency: 'MYR'} },
   'people': {value: numberOfPeople, type: 'number', format: {separators: false}}
   }" ></lib-i18n>

  To generate sentence like

  John has MYR 100 in this bank, which is $30.

  Assume locale is in MYR

  <lib-i18n key="EXAMPLE_MESSAGE" [params]="{
  'name': 'John',
  'balance': {value: balance, type: 'currency'},
  'balance2': {value: balance, type: 'currency', format: {currency: 'USD'} }" ></lib-i18n>

 where in the `json` file

"EXAMPLE_MESSAGE" : "Hello {{name}}, it is {{date}},your current balance is {{balance}}, and there is {{people}} in the queue!",

### Multilingual on same screen
We also can explicitly specify the language we wanted to localised with `lang` property

- Automatically localised for date/currency/number format for the language
- Please note that currency has to be specify in the resource json file
```diff
<lib-i18n [value]="numberOfPeople" 
+         lang="fr"
          type="number"></lib-i18n>

• The whole sentence will be localised to respective language including data/number/currency

<lib-i18n key="EXAMPLE_MESSAGE" [params]="{
  'name': 'John',
  'date': {value: today, type: 'date', format:{timeZoneName: 'short'}},
  'balance': {value: balance, type: 'currency',
   format: {currency: 'MYR'} },
  'people': {value: numberOfPeople, type: 'number', format: {separators: false}}
  }" 
+  lang="fr">
</lib-i18n>

Other available parameters for Date, Number and Currency

• Other available parameters are documented in source code, types.d.ts

Right to Left language support

However, i18n component is not support right to left language out of the box. Due to the limitation of accessing parent HTML. For example

<div>
  <i18n key="ACCOUNT_SUMMARY_TITLE"></i18n>
</div>

if we want to push the text to the right, we will need to access the property dir and set it to rtl from <div>, which is not appropriate to manipulate the parent HTML tag. Therefore, to make it compatible for right to left language, we can achieve with the following syntax with @ngx-translate library

<title dir="{{ 'LANGUAGE_DIRECTION' | translate }}">
  <i18n [key]="'ACCOUNT_SUMMARY_TITLE'"></i18n>
</title>

where 'LANGUAGE_DIRECTION' is either ltr or rtl from JSON resource file