Example of Language System in an Ionic 3 Application

When you want to create a language system and add multiple languages to your Ionic APP you have various designs available, but in a simple APP, there are 2 major ones.

The first design is where the UI design and APP functionality remain the same for both languages, in this case, you can use some javascript objects for every component you have.
This design is suited when you want to have consistency and implies a bit less work.

The second option is to clone each of your components for every language and make an appropriate file structure.
This design works well when you want to have different functionality and UI depending on the language.

Of course, there is the possibility to mix between these two designs, but in this article, I will present a simple implementation of the second design.

First, you create can create an interface for your settings object, even though you don't have any other settings in your app:

export interface SettingsObj {
    language: string
  }

I usually make a folder with all interfaces so in this case from the app.components.ts the import looks like this:

export interface SettingsObj {
    language: string
  }

Secondly, I create two services one for handling the settings object and one for handling the languages:
File ...settings.ts with SettingsService:

export interface SettingsObj {
    language: string
  }

As you see this is mostly a dummy service with a method that is used in case we can't get our settings object from DB.
File ...language.ts with SettingsService:

export interface SettingsObj {
    language: string
  }

The method setLanguage sets the language in the DB and emits after that an event so that the navigator knows the language has changed and change the view of the page.

Is important to notice that initially, we don't know which language should we use for our user, so there are generally 3 obvious ways of dealing with that:
1 We choose for him and the user can change that later
2 We get the language from the system
3 We force the user to select a language when the app starts for the first time

In this case, we will use the third method, so basically will show a modal and the user will have to choose a preferred language.
First, in the main component, we will have something like this:

export interface SettingsObj {
    language: string
  }

So all the pages used by the navigator will be in two arrays, as, in this case, we have two languages, the method openLanguageModal will be used to present the model for choosing the language for the first application use, we will check if is the first use like this in the constructor:

export interface SettingsObj {
    language: string
  }

If we can't get the value from DB it means that this is the first use, so will show the modal otherwise we change the rootPage according to our language since this example has only two languages there is only a single check.

Also in the main component, we have to check if the language suddenly changed and also to populate the arrays with views for our languages.
To check if the language has changed we subscribe to an event:

export interface SettingsObj {
    language: string
  }

As it's seen when we detect a language change we will change the root page and then navigate on it, this is one of the simplest logic, as we do not care if the user was on a specific page, we do this for simplicity and also because the app pages/views aren't fully mirrored so a page in a language may not have a correspondent in another.
The page arrays can be populated like this:

export interface SettingsObj {
    language: string
  }

The title is in these arrays is used as the title of the page, we use that in the sidebar menu.
Furthermore, we can implement a simple language switcher presented in the menu sidebar:

Example of Language switcher in the template:

export interface SettingsObj {
    language: string
  }

Of course, you can visit the repo at URL if you want to see all the code: Link