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