In several previous articles, we explored different ways of internationalizing Angular applications: with a built-in I18n solution and by enabling in-context translations editing. In this article, we are going to make a step forward and learn how to translate Ionic applications with the help of the ngx-translate module. Ionic, as you probably know, is a framework built on top of Angular allowing to create cross-platform mobile applications. It was originally introduced in 2013 and the newest version 4 has been released recently.
The following topics are on our agenda:
- How to create a Ionic 4 app
- Integrating the ngx-translate module into the app
- Setting a default locale and switching to another locale
- How to store translations and load them with an HTTP client
- Performing the actual translations and providing parameters to interpolate
- Working with translations inside the classes
So, shall we start?
Prerequisites
If you would like to follow this tutorial, install the following:
- NodeJS version 10 or higher and NPM. Earlier versions may work as well but the Ionic 4 application compiles much slower.
- Ionic 4, which is the most recent version at the time of writing this article. To install it, run
npm install -g ionic
and follow the given instructions. Note that version 4 is currently not stable so the installer may ask whether you’d like to pick version 3 instead.
This is pretty much it. After you are done, create a new Ionic application by running:
tabs
here is just a name of the template to use.
Next, after this command is done, you should be able to cd
into the Translation directory and run:
As a result, the server will start and your browser should open a localhost:8100
page with some boilerplate content.
Integrating ngx-translate
In order to translate our Ionic application, we will require an ngx-translate module, which is a third-party solution created by Angular enthusiasts. Why don’t we use a built-in Angular module instead, you may ask. Well, unfortunately, Ionic 4 does not support this module yet, and it seems like it won’t be introduced in the near future. So, let’s stick with ngx-translate:
Apart from the core library, we are also installing the http-loader
, which is going to load JSON files for us.
Now let’s import all the necessary modules. Open src/app/app.module.ts file and add the following lines:
Next, define an exported translations loader function:
This loader will fetch JSON files from the assets/i18n folder that we are going to create shortly.
Lastly, add all these modules to the imports
property:
Settings a Default Locale
To provide a default locale, we need to modify the src/app/app.component.ts file:
Here we are setting English as default locale. If you would like to switch language, say this.translate.use(‘LANG_CODE’). Please note that if you do not, add this line after setDefaultLang
, and the texts on the page won’t be updated after language change (which is certainly an ngx-translate bug).
Performing Simple Translations
Okay, now let’s translate something! Navigate to the src/app/tab1/tab1.page.html file and tweak the tab’s title in the following way:
Here we are using the translate
pipe and providing a translation key (tab1.tabName
). In order to specify this translation, create two files inside the assets/i18n folder:
- en.json
- ru.json
Of course, you are free to choose any other locales, but I’m going to stick with English and Russian.
The dot inside the translation key means nesting, so the files should have the following contents:
en.json
ru.json
Nesting (or namespacing) is a very useful technique because it allows you to group related translations together. In this way, you may have namespaces like blog or admin. Also, keys under different namespaces may have the same names.
There is one last step we need to perform to make this working (yeah, I know, there is always some “last” and “very last step”). Open src/app/tab1/tab1.module.ts file and modify it like this:
In this way, we are enabling the translate
pipe for the given module.
After you have performed the above steps, reload the server. You should see that the title of the first tab now has the proper translation.
Passing Parameters to Translations
In some cases, you may need to pass parameters to your translation and interpolate it into the output string. Let me demonstrate how to do that:
Here we saying translate
inside the p
tag. Also, note the translateParams
attribute which passes the actual parameters in the form of an object. lang
is the parameter name, whereas language
is the value. tab1.invite
is our translation key.
Provide a value for this key now:
ru.json
en.json
The {{lang}}
is interpolation — it will be replaced with the value of the language
attribute passed in the template.
Now, the language
variable should be defined somewhere, so let us do it inside the tab1.page.ts file:
I have pinpointed two lines of code to add:
- Import translation service
- Fetch the currently used language and store it inside the variable
Finally, reload the page and observe the result!
Switching Locales
Of course, the user should be able to switch the app’s locale using some kind of interface. Let’s code this feature now!
First of all, tweak the markup by adding a new select box:
So, what’s going on here?
- We are adding a new item labeled as “Language” (with the
translate
attribute). - The item contains a select box that is bound to the
language
model. - Whenever a new value is selected, fire a
languageChange()
method. - The select box also has a translated placeholder.
Next, take care of the event handler by modifying the tab1.page.ts file:
By saying this.translateService.use()
, we are actually switching the locale.
Also, let’s take care of the translations for the label and placeholder:
ru.json
en.json
Note that I have not provided Language
key at all for the English locale. Why? Well, because if the module cannot find the translation key, it will be simply printed out on the screen. For the English locale this is totally okay, though, of course, you may say "Language": "Language"
.
Performing Translations in Classes
Sometimes you may want to work with your translations right inside the classes. Let me show you a quick example.
First, tweak tab1.page.ts file in the following way:
Let us move step by step:
- Create a new property that we will be displayed in the template later on.
- Programmatically load new translations for the English locale. Note that by doing this we are effectively wiping out all existing translations!
- Providing translation with interpolation
- Getting translation under
someProperty
key (and passing a value to interpolate). We are subscribing to an event and so once the response arrives… - …we assign the received values to the
someProperty
attribute.
As a result, you may utilize translations inside the tab1.page.html template:
Phrase and Translation Files
Certainly, working with translation files is not easy, especially when the app is big and supports many languages. You might easily miss some translations for a specific language, which may lead to confusion among users. It is Phrase that can make your life easier: Grab your 14-day trial!
Phrase supports many different languages and frameworks, including JavaScript, of course. It allows to easily import and export translations data. What is cool, you can quickly understand which translation keys are missing because it is easy to lose track when working with many languages in big applications. On top of that, you can collaborate with translators as it is much better to have a professionally done localization for your website.
Conclusion
In this article, we took a look at how to translate Ionic applications with the help of the ngx-translate module. You have learned how to provide translations and load them, how to switch locales, how to perform interpolation and how to work with translations inside classes.
So, as you see, localizing Ionic applications is not very different from translating Angular apps – as these two technologies have many similarities. I hope that you are now ready to apply the described concepts in real projects! As always, I thank you for staying with me and until the next time.
Comments