Ionic Multi Language Tutorial

ionic multi-language support example using ng-translate (http://github.com/ngx-translate) allows you to create ionic projects with multiple language support.

Steps:

1. Create New Ionic Project
2. Install Required dependencies
3. Create .json files for a different language (here I'm going to use English & Tamil)
4. Declaring inside app.module.ts
5. Working with home.html & home.ts

Create New Project

Here, I'm going to create new project called i18. After creation we can serve our project to browser

ionic <span class="hljs-built_in">start</span> i18n blank
<span class="hljs-built_in">cd</span> i18n
ionic serve

Install Required Dependencies

For translation purpose, we are going to use a angular library called ng-translate (http://github.com/ngx-translate/core). To install ng-translate we need to execute

npm <span class="hljs-keyword">install</span> @ngx-<span class="hljs-keyword">translate</span>/core <span class="hljs-comment">--save</span>
npm <span class="hljs-keyword">install</span> @ngx-<span class="hljs-keyword">translate</span>/<span class="hljs-keyword">http</span>-loader

Create .json file for languages

assets/i18n/en.json

{<span class="hljs-attr">"APPLE"</span>: <span class="hljs-string">"Apple"</span>, <span class="hljs-attr">"BALL"</span>: <span class="hljs-string">"Ball"</span>, <span class="hljs-attr">"CAT"</span>: <span class="hljs-string">"Cat"</span> }

assets/i18n/ta.json

{ <span class="hljs-attr">"APPLE"</span>: <span class="hljs-string">"ஆப்பிள்"</span>, <span class="hljs-attr">"BALL"</span>: <span class="hljs-string">"பந்து"</span>, <span class="hljs-attr">"CAT"</span>: <span class="hljs-string">"பூனை"</span>}

Declaring inside app.module.ts

<span class="hljs-keyword">import</span> { HttpClientModule, HttpClient } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/common/http'</span>;
<span class="hljs-keyword">import</span> { TranslateModule, TranslateLoader } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ngx-translate/core'</span>;
<span class="hljs-keyword">import</span> { TranslateHttpLoader } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ngx-translate/http-loader'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createTranslateLoader</span>(<span class="hljs-params">http: HttpClient</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> TranslateHttpLoader(http, <span class="hljs-string">'./assets/i18n/'</span>, <span class="hljs-string">'.json'</span>);
}
@NgModule({
  <span class="hljs-attr">imports</span>: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
      <span class="hljs-attr">loader</span>: {
        <span class="hljs-attr">provide</span>: TranslateLoader,
        <span class="hljs-attr">useFactory</span>: createTranslateLoader,
        <span class="hljs-attr">deps</span>: [HttpClient]
      }
    })
  ]
})
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppModule</span> </span>{}

In above code, we have imported and declared TranslateModule, TranslateLoader, TranslateHttpLoader modules for translation purpose, where these plugin requires http module for requesting .json file, so we also imported and declared HttpClientModule, HttpClient

working with home.html

<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ion-list</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-item</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-label</span>></span>Language<span class="hljs-tag"></<span class="hljs-name">ion-label</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-select</span> [(<span class="hljs-attr">ngModel</span>)]=<span class="hljs-string">"lang"</span> (<span class="hljs-attr">ionChange</span>)=<span class="hljs-string">"switchLanguage()"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">ion-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"en"</span>></span>English<span class="hljs-tag"></<span class="hljs-name">ion-option</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">ion-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"ta"</span>></span>Tamizh (தமிழ்)<span class="hljs-tag"></<span class="hljs-name">ion-option</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">ion-select</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-item</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-list</span>></span>

<span class="hljs-tag"><<span class="hljs-name">ion-list</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-item</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h2</span>></span></span><span class="hljs-template-variable">{{ 'APPLE' | translate }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-item</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-item</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h2</span>></span></span><span class="hljs-template-variable">{{ 'BALL' | translate }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-item</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-item</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h2</span>></span></span><span class="hljs-template-variable">{{ 'CAT' | translate }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-item</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-list</span>></span></span>

We created ionic select box to choose languages and we created a list of data to display with translate parameter.

working with home.ts

<span class="hljs-keyword">import</span> { TranslateService } from <span class="hljs-string">'@ngx-translate/core'</span>;
export <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomePage</span> </span>{
  lang:any;
  <span class="hljs-keyword">constructor</span>(<span class="hljs-keyword">public</span> translate: TranslateService) {
    <span class="hljs-keyword">this</span>.lang = <span class="hljs-string">'en'</span>;
    <span class="hljs-keyword">this</span>.translate.setDefaultLang(<span class="hljs-string">'en'</span>);
    <span class="hljs-keyword">this</span>.translate.use(<span class="hljs-string">'en'</span>);
  }
  switchLanguage() {
    <span class="hljs-keyword">this</span>.translate.use(<span class="hljs-keyword">this</span>.lang);
  }
}

In the above code, we have created a translate variable using TranslateService for choosing languages

Download