Internationalization in Ember

What is Internationalization?

Internationalization is the design and development process of the application that enables localization for normalizing application in a different culture, region or language. It is also called as I18n because there are 18 letters between I and n in Internationalization word.

Why Internationalization?

Different countries and regions adopt different language and formation. If you want to present your application based on their adopted format, you need to add internationalization on your app.

Let’s take a look at the example of different lang & formation adaption.

• Internationalization word itself has a different formation in different countries such as the below image.

  

• If you take a look at number formation for different countries, there is also different format to separate number as below example.

  

• If your application present content in only a single format or language, then it is a little bit complex to understand in every region. By adding Internationalization we can resolve this problem.

Internationalization in Ember with ember-intl

Here, We are going to learn :

• set up of ember-intl
• How to implement Internationalization on your app.
• How to change locale dynamically.

Let’s configure ember-intl

• Run below command to install ember-intl using ember-cli

  ember install ember-intl

  • This adds the following files on your project:
    • Formats.js at app directory.
    • Ember-intl.js at config directory
    • En-us.yaml at translations directory.

  You can start your Ember server with :

  ember  server 

• If you start the server after install ember-intl might be possible you get warning on the console

  

• To prevent this warning you need to add suggestion’s line on your project’s .template-lintrc.js file.

  .template-lintrc.js

  'use strict'; 
  
   module.exports = { 
    extends: 'recommended',  
    rules: { 
      'no-bare-strings': true; 
    } 
   }; 

• That means:
  • You can not use plain text on your template.
  • You need to use {{t “”}} helper instead of plain text.
  • Translate helper can use the below options as a parameter.
    • true/false
    • Array
    • Object
    • Pain text
• Convert you template with bar helper.

  application.hbs 

   <h1>{{t "hello world"}}</h1> 
   {{outlet}} 

• Now application displayed an error for,
  • Missing translation "hello world" for the locale, am I right? Because of yet we not added translation file as .json or .yaml format
  • You can use here ICU message syntax.
• Add translations file for local as .json or .yaml format, ember-intl default creates .yaml file
• Here we are going to example for internationalization in chines. You need to add a “zh-Hans.json” file as a translator.

  translations/zh-Hans.json 

   {"hello world": "?? ??"} 

• Still, the remaining thing is informing the application that I need to add internationalize for chines.

   routes/application.js 

   import { inject as service } from '@ember/service'; 
   import Route from '@ember/routing/route'; 
  
   export default Route.extend({ 
    intl: service(), 
    beforeModel() {  
      this.get('intl').setLocale(['zh-Hans']); 
    } 
  });

Let's switch the language dynamically.

If you want to change your language dynamically at run time add action for the same.

application.hbs 

<select {{action "changeLanguage" on="change"}} id="lan"> 
 <option value="en-us"> english </option>
 <option value="en-us"> Chinese </option>
</select>

controllers/application.js 

 import Controller from '@ember/controller'; 
 import { inject as service } from '@ember/service'; 
 
 export default Controller.extend({ 
   intl: service(),
   actions: { 
    changeLanguage: function() { 
     var lang = $("#lan").val(); 
     this.get('intl').setLocale([lang]); 
    } 
  } 
 });

How to use parameters in templates?

When you want to use parameters in templates, you need to handle it in different ways. Let’s take a look at an example for the same.

application.hbs 

 {{t "hello world" name="XYZ"}} 

translations/zh-Hans.json 

 {"hello world": "hello word {name}"} 

Here, name key just replaces with the parameter value from the template.

Conclusion:

It’s very easy to enable internationalization or enable localization in ember app using ember-intl. If anyone wants to enable it they just need to add some configuration and transactions files(can use external APIs like CLDR data). I hope this is helpful to you.

For professional paid support, you may contact us at [email protected] .