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
- Examples Usage for
Table of contents generated with markdown-toc
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
<lib-i18n [value]="numberOfPeople"
type="number"
[format]="{separators: false}" ></lib-i18n>
<lib-i18n [value]="numberOfPeople"
type="number" ></lib-i18n>
<lib-i18n [value]="balance"
type="currency"
[format]="{currency: 'MYR'}" ></lib-i18n>
<lib-i18n [value]="balance"
type='currency' ></lib-i18n>
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 <script> 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>
<button>
<lib-i18n key="ACCOUNT_SUMMARY_TITLE"></lib-i18n>
</button>
<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>
<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!",
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
<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 are documented in source code, types.d.ts
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