Introduction

If you need your app to be easily adapted to specific local languages and cultures, you might like to apply internationalization to your project(s).

Enabling Internationalization

This feature is enabled by default for all Ionic 5 projects but there are several prerequisites that must be met before it can be used.

Creating Translation TS

1. First of all, create at least one JSON translation file that will be used for storing the first language library.
   Select CREATE NEW > TypeScript, from the drop-down, select the Angular i18n language type and enter its name, e.g. en. To confirm, click Create Script:

Now, let's create a dictionary for our English translation.

2. In the Project view, locate and open the previously created en TypeScript and add some JSON dictionary to it, e.g:

{
    "Card_Title": "Hello!",
    "Card_Content": {
        "spec_value_1": "This is a multilingual app",
        "spec_value_2": "Made by:"    
    }
}

🚧

Important Note!

The above file is just a sample and has to be adjusted to your particular project to be working.

Please check out our sample multilingual app here to learn how to use the ngx-translate library in Ionic 5.

Now, the script is ready to be used for the UI components that support internationalization.
The script above, for example, is created for using with Card and its child elements.

Setting App Default Language

Go to App settings > Components of the Project Tab folder and enter the JSON File name for the chosen default language into in the Default Language box:

This will define the language your app starts in and can be easily changed (for example, es (Spanish) or de (German)) any time.

🚧

Important Note!

Make sure that the app default language and the TypeScript file (should be created additionally) have the same names:

UI Components with Internationalization Property

The Internationalization property is available for the following text containing UI components and you are free to independently select the UI components you would like to enable (or disable) this feature for:

• Button: Text Internalization
• Checkbox: > Label > Internalization
• Card Item: Text Internalization
• Card Item Title: Title Text Internalization
• Datetime: Placeholder Internalization and > Label > Internalization
• Image; Alt Text Internalization
• Input: Placeholder Internalization and > Label > Internalization
• Radiobutton: > Label > Internalization
• Range: Label > Internalization
• Link: Text Internalization
• List; List item > Item Label > Text Internalization
• Search: Placeholder Internalization and > Cancel Button > Cancel Button Text Internalization
• Select: Select Item Wrapper > Label > Internalization and Select > Placeholder Text Internalization, Select > Selected Text Internalization, Select > Cancel Text Internalization and *Select > OK Text Internalization
• Text: : Text Internalization
• Textarea: Placeholder Internalization and > Label > Internalization
  and
• Toggle: > Label > Internalization
  and.

If you add a new UI component from the list above to the screen, the Internationalization property value field(s) is/are enabled by default but can be set to False if needed:

📘

Want to know more?

In this sample app using Internationalization is demonstrated for the Text and Button components but any other component indicated above gets this property by default and can be applied for your project(s) if needed.

There are several ways Internationalization can be applied to your Appery.io projects: using UI components' properties, using variables, or using services mapping.

👍

Ionic 5 Internationalization Sample App

Please check out this sample app demonstrating using different options to add multi language support to your Appery.io apps.