@rxweb/translate

The most simplified and elegant library for Internationalization in Angular Application. It's easy to integrate in the application without much learning curve or overhead of implementation. Internationalize your application by following the two simple steps.

Overall objective of developing this library is to integration must simple and faster. Use as much as possible available features of Angular instead of reinventing the wheel.

• Install Package

• Automatic Translation Configuration Through CLI

• Strongly Typed

• Binding

  • Simple Binding
    • Property
    • Nested Object Property
  • Scope Parameter Binding
    • Component Scope
    • On Demand Scope
  • Conditional Scoped Binding
  • Binding By Key Name

• Translation Loading Stratergy

  • Loading Page Translation
  • Loading Shared Component Translation
  • Preload Translation Stratergy

• Language Content Translation

  • By URL With Page Title
    • By Manual
  • Fixed Language

• Cache

  • Active Language
  • Language Wise

• Power Tool For Translation

  • Create Missing Keys
  • Create Missing Files
  • Create Interface
  • Optimization After Build

Install Package

$ npm install @rxweb/translate

Automatic Translation Configuration Through CLI

If you want to configure all the translation configuration automatically, you must install @rxweb/cli

$ npm install @rxweb/cli

• rxweb.module.ts: This file resolves RxTranslateModule which contains caching and filePaths.
• rxweb.json: This file contains internationalization related configuration.
• rxweb.webpack.dev.js: This file webpack configuration file which exports TranslationWebpackPlugin module.
• assets/i18n : This folder contains multilingual data in their respective language folders
• src/app/i18n-models: This folder contains models for strongly typed binding.

@Translate

Translate decorator is used for resolving the translation data by given name of translationName. Here is example code:

@translate({translationName:'user'}) translation:{[key:string]:any}

Another approach, Which I liked most to assign the respective translation model to the translation object property.

@translate({translationName:'user'}) translation:UserTranslation

The UserTranslation will be generated automatically based upon the JSON data.

Binding

Simple Binding

Simple Binding consists of two types ie. property binding and nested object property

global.en.json:

{
   "applicationTitle":"User Registration",
  "text":{   
    "Description":"Full Name"
  }
}

Translation Property Declaration

The first step is to add @translate decorator in the component with the multilingual name

export class AppComponent  {
    @translate() multilingualContent:{[key:string]:any}
}

Property Binding

In the component html it is done using syntax

 <h1>  {{multilingualContent.applicationTitle}} </h1>

Nested Object Property

Binding nested level object

<div>
      <p>{{multilingualContent.text.Description}}</p>
</div>

Scope Parameter Binding

Component Scope

This can be done by interpolating the property name in the content string.

Now we are going to define the content with interpolating the property name of freeText. See the below JSON

user.en.json

{
"enteredText": "You have entered text is: {{freeText}}"
}

In the component, use the @translate decorator and passing the translationName

export class UserComponent {
    
    @translate({ translationName: "user" }) multilingualContent: { [key: string]: any }

    freeText: string = "India";
}

And in The html

<p>{{multilingualContent.text.enteredText}}</p>

On Demand Scope

While defining a JSON content string you have to use { for on-demand object value changes from the TS file. Here is the example text.

{
"selectedRecord": "You have selected record of '{name}'"
}

Now in the component, you have to call the function like as below:

selectUser(user) {
// the user object json would be like : {name:"John" }
let message = RxTranslateModule.tranlate(this.multilingualContent.text.selectedRecord, user);
}

Conditional Scoped Binding

For showing the multilingual content conditionally based upon the keys defined in the JSON.

Let’s consider a case where we want to show some information about the countries according to the input name of the country. If the user enters a value of India then it must show the content in English or French according to the user preferred language. Other than India it must show the information about the World. So, as per the above case, we have to define two properties in the JSON file, which are as below:

{    
"indiaInfo": "India, officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country, and the most populous democracy in the world.",
"worldInfo": "The World is Planet Earth and all life on it, including human civilization. In a philosophical context, the world is the whole of the physical Universe, or an ontological world.",
}

We have defined two properties and we need one more property that returns the content based upon the passed condition. So we have to write the code in string format, the code same as we write in the TS file. Here is the example

{
"conditionalText": "this.freeText == 'India' ? this.multilingualContent.indiaInfo : this.multilingualContent.worldInfo",
}

On the HTML side, you have to use conditionalText property for conditionally showing the content. Here is the output:

  <mark>{{multilingualContent.text.conditionalText}}</mark>

Binding By Key Name

This is another approach to get the key value from the object property by key name. Here is the JSON, which we get the userName value by calling the get method.

{
	"text":{
		"userName":"User Name"
	}
}

Here is the HTML.

  {{multilingualContent.get("text.userName")}}

Translation Loading Stratergy

Loading translated content can be done using lazy loading and using shared component.

Loading Page Translation

Lazy loading can be achieved using @rxweb/translate by configuration routes in app routing.
Let’s create a UserComponent and map the route into app routing.

    {
        path: 'user',
        component: UserComponent
    }

In the UserComponent TS:

export class UserComponent {

    @translate({ translationName: "user" })
    multilingualContent: { [key: string]: any }
   
}

Loading Shared Component Translation

Shared component can be achieved using rxTranslate. So let’s create a AddressComponent and map the translate decorator on the component property.

export class AddressComponent {
    @translate({ translationName: "address" }) multilingualContent: { [key: string]: any };
}

Next step is to apply on the component element which is a rxTranslate directive. The rxTranslate directive will resolve the content before initializing the component.

<app-address *rxTranslate=""></app-address>

Preload Translation Stratergy

preload translation strategy can be set to NoPreloading or PreloadAllModules with the RouterModule

 [
   RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules  })
 ]

And in RxWebModule define preloadingStrategy true into RxTranslateModule.

  RxTranslateModule.forRoot({
        preloadingStrategy:true
        })

Language Content Translation

Language content translation can be done based upon url, manual language change and fixed language

By URL With Page Title

For loading language content url wise the routing is configured as below:

const routes: Routes = [
    {
        path: '',
        redirectTo: "fr/login",
        pathMatch: "full"
    },
    {
        path: ':languageCode/login',
        component: LoginComponent
    }];

The component TS code:

export class LoginComponent {
    @translate({ translationName: "login" })
    multilingualContent: { [key: string]: any } 

    constructor(private route: Router) {

    } 

    navigate(languageCode: string) {
        this.route.navigate([languageCode, "login"]);
    }
}

For language change in the HTML

 <p class="small text-center text-gray-soft">
               <a class="blue-link" [class.active-language]="multilingualContent.languageCode == 'en'"  (click)="navigate('en')">English</a>
              <a class="blue-link" [class.active-language]="multilingualContent.languageCode == 'fr'" (click)="navigate('fr')">French</a>
  </p>

By Manual

Manual change of language on user selection can be done using changeLanguage of RxTranslateModule as below:

 changeLanguage(languageCode){
   RxTranslateModule.changeLanguage(languageCode)
 }

Fixed Language

In case where the content needs a fixed language to be set. It is done by defining language in @translate decorator.

export class UserComponent {
    @translate({ translationName: "user", language:"en" }) multilingualContent: { [key: string]: any };
}

Cache

Active Language

For setting active language cache true in the application set cacheActiveLanguageObject true.

RxTranslateModule.forRoot({
  cacheActiveLanguageObject:true
      })

Language Wise

For allowing language wise cache in the application we can set cacheLanguageWiseObject true.

          RxTranslateModule.forRoot({
            cacheLanguageWiseObject: true,
          })

Contributing

If you are thinking to make rxweb framework better, that's truly great. You can contribute from a single character to core architectural work or significant documentation – all with the goal of making a robust rxweb framework which helps for everyone in their projects. Even if you are don’t feel up to writing code or documentation yet, there are a variety of other ways that you can contribute like reporting issues to testing patches.

Check out the docs on how you can put your precious efforts on the rxweb framework and contribute in the respective area.

Need Help

We highly recommend for help please ask your questions on our gitter/rxweb-project to get quick response from us. Otherthan our gitter channel you can ask your question on StackOverflow or create a new issue in our Github Repository.

For, issue please refer our issue workflow wiki for better visibility our issue process.

Feature Request

You can request a new feature by submitting an issue to our GitHub Repository. If you would like to implement a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it.

License

MIT