⚡ Ionic Angular Localiser

• This project uses ngx translate, the internationalisation (i18n) library for Angular to change the content of the home page and alert button to the language chosen.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Angular Localiser
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• "The ngx-translate, the internationalisation (i18n) library for Angular lets you define translations for your content in different languages and switch between them easily.
• It allows access to a service, a directive and a pipe to handle any dynamic or static content. The main part of the library is the 'core'. A loader was added to load translations into the app.

📷 Screenshots

📶 Technologies

• Ionic framework v6
• Angular framework v13
• ngx translate/core (i18n) library v13
• Angular Augery Chrome Extension v1 useful for debugging.

💾 Setup

• Run npm i to install dependencies
• Run ng lint to lint files - all files currently pass linting.
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

💻 Code Examples

• language.service.ts function to set app language using option selected by user.

// sets default language as browser language if no other language choice made
// if language language selected then this value is stored using the ionic storage module
setInitialAppLanguage() {
  const language = this.translate.getBrowserLang();
  this.translate.setDefaultLang('en');

  this.storage.get(LNG_KEY).then(val => {
    if (val) {
      this.setLanguage(val);
      this.selected = val;
    }
  });
}

🆒 Features

• Select a language from the drop-down list and the language of headers, buttons, text alerts (as set up in the /assets/i18n/json files will change.

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Ionic Academy: How to Localise Your Ionic App with ngx-translate.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com