Translate App

In this section you will learn about how you can translate your app in your preferred language.‌

Gene support multilingual feature which helps you to build your app in your native language. Read the documentation carefully and follow the steps. Gene by default supports 12 languages, they are: English, French, Hebrew, Russian, Arabic, Chinese, German, Spanish, Japanese, Korean, Italian and Hungarian.

LanguageDefault Language Codes
Englishen
Frenchfr
Hebrewhe
Russianru
Arabic
ar
Chinese
zh
Germande
Spanish
es
Japanese
ja
Koreanko
Italian
it
Hungarianhu

How To Set Default Locale

If you want to change your default locale(you can select any of the given locale as default for your template) then you can follow the steps given below:‌

Step 1: Go to the src->app folder and open app.component.ts file:

import { TranslateService } from '@ngx-translate/core';

export class AppComponent {
constructor(translate: TranslateService) {
translate.setDefaultLang('en');
}
}

Step 2: Now change the language code to your desired language code. You can get the language code from the table above.‌

How To Add A New Locale

Here are the instructions to add a new locale in your app. We are taking an example of French that we are going to add.‌

Step 1: Create a json file with name of locale code inside the src->assets->i18n folder. Like in our example we need to create a file with fr name.‌

Step 2: Open the fr.json file that you have just created and define the static strings which you want to translate into French, you can check the other locale files to check how strings are defined.

{  
"HOME":"Accueil",
"SHOP":"Boutique",
"PRODUCT DETAILS": "détails du produit",
"CART" : "Chariot"
}

Step 3: Now you need to add your locale inside the app.component.ts file under the src->app folder.

import { TranslateService } from '@ngx-translate/core';

​export class AppComponent {
constructor(translate: TranslateService) {
translate.addLangs(['en', 'fr']);
const browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
}

That’s it, You have added a new locale in the template.

Last Updated 5 years ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages