![]() You won’t see much in the homepage created in the starter. Run the app in browser using $ ionic serve The -type=angular told the CLI to create an Angular app, and -cordova tells the CLI to integrate Cordova in the app. Start a basic tabs starter using $ ionic start ionicTranslate tabs -type=angular -cordova Ionic Framework : : : : : 2.3.0 Cordova:Ĭreating a basic Ionic-Angular app. Ensure latest Ionic CLI installation using $ npm install -g my environment for this blogpost Ionic: This will ensure you are using everything latest. Step 1- Create a basic Ionic Angular appįirst you need to make sure you have the latest Ionic CLI. ![]() Sounds pretty easy, right ? Well, let’s dive right into it. We will translate English text in 2 languages - French and Spanish Implement ngx-translate library to detect and translate AND Implement Cordova Globalization plugin or browser Internationalization API to detect device language.Prepare multiple language JSON files in assets.So the development outline of this blog will be We will use ngx-translate library for translating our texts as we are talking about only Angular Ionic apps in this post Translate - After the above two steps, you finally translate your app’s text to the intended language.This gives you the advantage of loading updated files, but costs you load time.Ĭreating the translation JSON files is mostly a manual process for smaller apps, but you can use online tools like this for quick translations, or like POEditor for more standardized workflow. Prepare Language Text - There are two ways to do thisĪ. You need to have a pre-translated dictionary (or JSON file) in your app build which stores the translations of all your app’s text in the required translation languages, ORī. You load language files from your server every time the app starts.This can either be done automatically by detecting phone or browser’s language (Globalization), OR, can be done with user actions (say, by using a dropdown).įor our use case, we will detect device’s language using both Cordova Globalization plugin and Browser’s Internationalization API. Translation Language - Detect the language you want to translate into.There are 3 major steps in the translation process in an app. Translations, thanks to Google, look very easy, but they are a bit involved in case of apps and websites, in our case Ionic 5 apps. Till date, majority of apps have been developed in English, no surprise ! But with growing apps users, every app is now focusing on translating to local languages.įirst we need to understand the steps involved in the process. Multi-language translation, OR internationalization is a growing need for every app that wants to target international customers. This post will explore the Ionic apps made in Angular Cordova, but the same process can apply in Angular Capacitor apps as well. ![]() Ionic has a variety of app types nowadays (Angular/React/Vue , Cordova/Capacitor). This is specially useful for mobile apps, as refreshing the build on user device is not possible at runtime. We will also look at a popular sought after method of loading JSON files from servers instead of keeping them in local build. You will also learn how to get device specific language and convert your app’s text to the same language / locale. ![]() In this post you’ll learn how to translate text in Ionic 5 apps and PWA.
0 Comments
Leave a Reply. |