{"id":36,"date":"2019-10-07T09:54:38","date_gmt":"2019-10-07T09:54:38","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/embryo\/?page_id=36"},"modified":"2019-10-15T09:35:25","modified_gmt":"2019-10-15T09:35:25","slug":"translate-app","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/embryo\/translate-app\/","title":{"rendered":"Translate App"},"content":{"rendered":"\n

Embryo-Angular<\/strong><\/em> support multilingual feature which helps you to build your app in your native language. Read the documentation carefully and follow the steps. Embryo by default supports 2 languages, they are: English <\/strong>and French<\/strong>.\u200c<\/p>\n\n\n\n

How To Set Default Locale<\/strong><\/h5>\n\n\n\n

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:\u200c<\/p>\n\n\n\n

Step 1:<\/strong> Go to the src->app<\/code> folder and open app.component.ts<\/code> file:<\/p>\n\n\n\n

import { TranslateService } from '@ngx-translate\/core';
 
export class AppComponent {
   constructor(translate: TranslateService) {
      translate.setDefaultLang('en');
   }
}<\/pre>\n\n\n\n
Step 2: <\/strong>Now change the language code to your desired language code. You can get the language code from the table above.\u200c<\/p>\n\n\n\n
How To Add A New Locale<\/h5>\n\n\n\n
Here are the instructions to add a new locale in your app. We are taking an example of French<\/strong> that we are going to add.\u200c<\/p>\n\n\n\n
Step 1: <\/strong>Create a json<\/code> file with name of locale code inside the src->assets->i18n<\/code> folder.\u200c<\/p>\n\n\n\n
Step 2:<\/strong> Open the fr.json<\/code> 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.<\/p>\n\n\n\n
{
  \"HOME\":\"Accueil\",
  \"SHOP\":\"Boutique\",
  \"PRODUCT DETAILS\": \"d\u00e9tails du produit\",
  \"CART\" : \"Chariot\"
}<\/pre>\n\n\n\n
Step 3:<\/strong> Now you need to add your locale inside the app.component.ts<\/code> file under the src->app<\/code> folder.<\/p>\n\n\n\n
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');
   }
}
\u200c
<\/pre>\n\n\n\n
Now , where you want to use the translation language then you can use it as follows:<\/p>\n\n\n\n
<a class=\"nav-link\" routerLinkActive=\"active-link\">
   {{item.name | translate}}
 <\/a><\/pre>\n\n\n\n
That’s it, Now you can translate your app in your preferred language.<\/p>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n        <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Embryo-Angular support multilingual feature which helps you to build your app in your native language. Read the documentation carefully and follow the steps. Embryo by default supports 2 languages, they are: English and French.\u200c How To Set Default Locale If you want to change your default locale(you can select any of the given locale as […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/36"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":7,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/36\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/36\/revisions\/287"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/media?parent=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}