Click here to Skip to main content
13,195,821 members (55,611 online)
Click here to Skip to main content
Add your own
alternative version

Stats

28K views
27 bookmarked
Posted 25 Oct 2016

Angular2 & WebApi (SPA) for Enterprise App - Part 4 - Multi-Languages (i18n)

, 28 May 2017
Rate this:
Please Sign up or sign in to vote.
In this article, we will see how to use multi-languages(i18n) in angular2

Other Articles in the Series

  1. Overview
  2. Add new Permission
  3. Project structure
  4. Multi-Languages (i18n)
  5. DI & IoC - Why and Why not?
  6. RESTful & WebApi
  7. Manage Application Lifecycle
  8. Build & Deploy Application
  9. New version of TinyERP with Angular 2 (typescript)
  10. CQRS: Avoiding performance issues in enterprise app (basic)
  11. Multiple data-stores: Scale your repository (Part 1)
  12. Multiple data-stores: Scale your repository (Part 2)
  13. Basic authentication (user name/ password) with OWIN

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).

Other Articles in the Series

  1. Single Page Application (SPA) for Enterprise App (Angular2 & WebApi)
  2. Single Page Application (SPA) for Enterprise App (Angular2 & WebApi) - Part 2
  3. Angular2 & WebApi (SPA) for Enterprise App - Part 3 - Project structure

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:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

tranthanhtu.vn
Architect
Vietnam Vietnam
I have more than 8 years in web development for multiple types of applications (ERP, Education System, ...).
I usually organize training/ coaching on specified topic (such as: RESTful/ WebApi, Angular2, BEM, LESS, SASS, EF, NodeJs ....). Please contact me on Skype (tranthanhtu83) or email (contact@tranthanhtu.vn) if need.
For more information about me, Please visit http://www.tranthanhtu.vn/page/about-me

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
EvelineGarde21-May-17 3:19
memberEvelineGarde21-May-17 3:19 
AnswerRe: My vote of 5 Pin
tranthanhtu.vn21-May-17 3:39
professionaltranthanhtu.vn21-May-17 3:39 
QuestionI am getting database error when I run api Application Pin
Member 1296617324-Jan-17 8:53
memberMember 1296617324-Jan-17 8:53 
AnswerRe: I am getting database error when I run api Application Pin
tranthanhtu.vn24-Jan-17 15:04
professionaltranthanhtu.vn24-Jan-17 15:04 
QuestionChange locale Pin
shlomo.elbaz22-Jan-17 22:21
professionalshlomo.elbaz22-Jan-17 22:21 
AnswerRe: Change locale Pin
tranthanhtu.vn22-Jan-17 22:35
professionaltranthanhtu.vn22-Jan-17 22:35 
GeneralRe: Change locale Pin
shlomo.elbaz23-Jan-17 8:22
professionalshlomo.elbaz23-Jan-17 8:22 
AnswerRe: Change locale Pin
tranthanhtu.vn23-Jan-17 14:50
professionaltranthanhtu.vn23-Jan-17 14:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171019.1 | Last Updated 29 May 2017
Article Copyright 2016 by tranthanhtu.vn
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid