TU Tran

Technologies should serve for business purpose.

NAVIGATION - SEARCH

[TinyERP]Multi-Languages (i18n)

Introduction

I have looked around the internet. Some others have already contributed their solution for multi-languages in Angular2.

Look at my code. I have another solution for this case, it looks easier to use on both ts code or from html file.

How to Get the Code

Please check out the code at https://github.com/techcoaching/TinyERP.

How to Use the Code

Look at "<root>/app/modules/security/role/addRole.html", we see the following HTML:

<page>
    <page-header>
        {{i18n.security.addOrUpdateRole.title}}
    </page-header>
    <page-content>
        <form-default>
            <form-text-input [placeHolderText]=i18n.security.addOrUpdateRole.inputName 
            [labelText]=i18n.security.addOrUpdateRole.name

                [validation]="['security.addOrUpdateRole.validation.nameIsRequire',
                'security.addOrUpdateRole.validation.keyAlreadyExisted']"
                [(model)]=model.name>
            </form-text-input>
            <form-textarea [placeHolderText]=i18n.security.addOrUpdateRole.inputDesc 
            [labelText]=i18n.security.addOrUpdateRole.desc [(model)]=model.description>
            </form-textarea>

            <form-permission-select [(values)]=model.permissions 
            [placeHolderText]=i18n.security.addOrUpdateRole.inputPermissions 
            [labelText]=i18n.security.addOrUpdateRole.permission

                [(model)]=model.permissions>
            </form-permission-select>

            <form-footer>
                <button id="save" 
                (click)="onSaveClicked($event)" type="button" 
                 class="btn btn-primary">{{i18n.common.form.save}}</button>
                <button id="cancel" 
                (click)="onCancelClicked($event)" type="button" 
                 class="btn btn-default">{{i18n.common.form.cancel}}</button>
            </form-footer>
        </form-default>
    </page-content>
</page>

In this HTML, we use some texts from locale file, such as: i18n.security.addOrUpdateRole.inputName, i18n.security.addOrUpdateRole.name, ...

There is a convention for those texts, they are in format: i18n.<moduleName>.<name of page>.<name of field>. For example, "i18n.security.addOrUpdateRole.name", we understand that this is the text for name field on addOrUpdateRole page in security module.

For a better understanding about moduleName, see Angular2 & WebApi(SPA) for Enterprise App - Part 3 - Project Structure.

The value for those was located in "<root>/app/resosurces/locales/<moduleName>.<language>.json", for example security.en.json will contain all text that was used in security module in English language.

For more information, how did I implement this, please have a look at "<root>/app/models/ui/baseComponent.ts" (for i18nHelper and i18n properties).

 

For more information about other articles in this series

Thank you for reading,

Note: Please like and share to your friends if you think this is useful article, I really appreciate

 

 

Comments (6) -

Shlomo Elbaz

How to change the default language of TinyERP application?

Reply

Hi Shlomo Elbaz,
Please open "app/config/appConfig.ts" and update this code:
"localization: {lang: Languages.EN}" to your appropriated language.
I expect, we should use Languages object rather than hard-code value.

Reply

How can I get the database, or could you please help me by sending a  database backup about  TinyERP - Multi-Languages (i18n) application demo??.

Thank you in advance.

Reply

Hi Marcial,
Thank for sending me  your comment.
At this time, we did not have database script, as the EntityFramework will create database for us automatically (Entity Code-First approach)
Could you please send me the screenshot of your error.

Reply

I got it to work,  was missing some data base configuration.
Thank very much Tu Tran !!

Reply

Ok Marcial,

Reply

Add comment