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.

You can 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:

👍

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.

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 Internationalization
• Card Item: Text Internationalization; Card Item Title: Title Text Internationalization
• Checkbox: > Label > Internationalization
• Datetime: Placeholder Internationalization and > Label > Internationalization
• Image: Alt Text Internationalization
• Input: Placeholder Internationalization and > Label > Internationalization
• Link: Text Internationalization
• List > List item > Item Label > Text Internationalization
• Radiobutton: > Label > Internationalization
• Range: Label > Internationalization
• Search: Placeholder Internationalization and > Cancel Button > Cancel Button Text Internationalization
• Select: Select Item Wrapper > Label > Internationalization and Select > Placeholder Text Internationalization, Select > Selected Text Internationalization, Select > Cancel Text Internationalization and Select > OK Text Internationalization
• Text: Text Internationalization
• Textarea: Placeholder Internalization and > Label > Internationalization
• Toggle: > Label > Internationalization
  and
• Toolbar Title: Text Internationalization.

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:

🚧

Important: Using Multiline Text Value

Note that the Text property value being a key must not contain line breaks, otherwise Internationalization will be disabled (even if specifically set to True).
To enable Internationalization for multiline Text value, please break the component into multiple components.

📘

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.