{"id":1784646,"date":"2020-11-19T00:43:10","date_gmt":"2020-11-19T05:43:10","guid":{"rendered":"https:\/\/www.codementor.io\/ushmidave905\/localization-in-angular-applications-using-rxweb-1bwdaxf7b9"},"modified":"2020-11-19T00:43:10","modified_gmt":"2020-11-19T05:43:10","slug":"localization-in-angular-applications-using-rxweb","status":"publish","type":"station","link":"https:\/\/platodata.io\/plato-data\/localization-in-angular-applications-using-rxweb\/","title":{"rendered":"Localization in Angular Applications using RxWeb"},"content":{"rendered":"

Localization in an angular application can increase its efficiency to solve business problems as it helps the software to attach people through their locale<\/code> or language<\/code><\/p>\n

Translated apps have an ability to focus on users having different language, culture and place. In this article I am going to discuss implementation of internationalization in angular applications using @rxweb\/translate<\/a><\/p>\n

    \n
  1. Taking care of two major factors : Maintainability and Consistency<\/li>\n
  2. Keeping the source code and the translation cords seperate<\/li>\n
  3. Globally resolving translated data, setting default language and adding languages<\/li>\n
  4. Following right coding practices and standards<\/li>\n<\/ol>\n

    let’s get started by installing the package<\/p>\n

    \n

    npm install @rxweb\/translate<\/p>\n<\/blockquote>\n

    Registration of the Module :<\/h2>\n

    Import the generated Translate in app.module.ts as below:<\/p>\n

    \n

    For the module in the application, import theTranslateModule<\/code> as well
    app.module.ts:<\/p>\n<\/blockquote>\n

    import<\/span> { BrowserModule } from<\/span> '@angular\/platform-browser'<\/span>;\nimport<\/span> { NgModule} from<\/span> '@angular\/core'<\/span>;\nimport<\/span> { RxWebModule } from<\/span> '.\/rxweb.module'<\/span>; @NgModule({ declarations<\/span>: [ AppComponent ], imports<\/span>: [ BrowserModule, AppRoutingModule, RxTranslateModule.forRoot({ cacheLanguageWiseObject<\/span>: true<\/span>, globalFilePath<\/span>: \"assets\/i18n\/{{language-code}}\/global.{{language-code}}.json\"<\/span>, filePath<\/span>: \"assets\/i18n\/{{language-code}}\/{{translation-name}}.{{language-code}}.json\"<\/span>}) ], providers<\/span>: [RxTranslateModule], exports<\/span>: [RxTranslateModule], bootstrap<\/span>: [AppComponent]\n})\nexport<\/span> class<\/span> AppModule<\/span> <\/span>{ }\n<\/code><\/pre>\n
    RxTranslateModule file contains properties with their usage as below:<\/p>\n
      \n
    1. cacheLanguageWiseObject<\/strong> : Set it true<\/code> to maintain cache of the translation keys to increase the performance.<\/li>\n
    2. globalFilePath<\/strong> : Set the global translation file to resolve the
      global translation objects component wise or eg: for en(global.en.json)<\/li>\n
    3. filePath<\/strong> : Set the file path for resolving the translation objects in each module in respect to its translation name eg : for login(login.en.json)<\/li>\n<\/ol>\n
       Resolve Global Translate Data :<\/h2>\n
      In the app component resolve the @translate<\/code> decorator object to get the translated global data<\/p>\n
      app.component.ts:<\/p>\n
      import<\/span> { Component } from<\/span> '@angular\/core'<\/span>;\nimport<\/span> { translate } from<\/span> '@rxweb\/translate'<\/span>; @Component({ selector<\/span>: 'app-root'<\/span>, templateUrl<\/span>: '.\/app.component.html'<\/span>, styleUrls<\/span>: ['.\/app.component.css'<\/span>]\n})\nexport<\/span> class<\/span> AppComponent<\/span> <\/span>{ @translate() global: any;\n}\n<\/code><\/pre>\n
       Bind The text :<\/h3>\n
      Bind the text based upon the resolved object in app component using two way binding(Interpolation) used in angular<\/p>\n
      app.component.html:<\/p>\n
      {{global.Title}}\n<\/code><\/pre>\n
       Form The Json :<\/h3>\n
      The translation objects are resolved from the global file path and the structure of the json files is as below:<\/p>\n
      \"Capture.PNG\"<\/p>\n
      Forming the json in the files as keys based upon the multilingual content you want. Say for example you are translating your content into two languages(en and fr) then the title would be formed as:<\/p>\n
      \"Json<\/p>\n
       Output :<\/h3>\n
      \"Output\"<\/p>\n
      Here is the output of the above code. A complete basic example can be viewed on stackblitz<\/a><\/p>\n
       Resolve Component Based Translation Data<\/h2>\n
      In the component resolve the @translate<\/code> decorator object to get the translated
      data based upon the translation name, Here is an example of a login component so here the translation name will be login<\/code><\/p>\n
      login.component.ts<\/p>\n
      import<\/span> { Component, OnInit } from<\/span> '@angular\/core'<\/span>;\nimport<\/span> { translate, RxTranslation } from<\/span> '@rxweb\/translate'<\/span>; @Component({ selector<\/span>: 'app-login-component'<\/span>, templateUrl<\/span>: '.\/login-component.component.html'<\/span>, styleUrls<\/span>: ['.\/login-component.component.css'<\/span>]\n})\nexport<\/span> class<\/span> LoginComponent<\/span> implements<\/span> OnInit<\/span> <\/span>{ @translate({translationName<\/span>:'login'<\/span>}) login: any; constructor<\/span>(){ }\n}\n<\/code><\/pre>\n
       Bind The text :<\/h3>\n
      Bind the text based upon the resolved object in login component using the same way as global translation using the login object<\/p>\n
      app.component.html:<\/p>\n
      <form> <div class=\"form-group\"> <label for=\"exampleInputEmail1\">{{login.emailLabel}}<\/label> <input type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" aria-describedby=\"emailHelp\"> <small id=\"emailHelp\" class=\"form-text text-muted\">{{login.emailNoteText}}<\/small> <\/div> <div class=\"form-group\"> <label for=\"exampleInputPassword1\">{{login.passwordLabel}}<\/label> <input type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\"> <\/div> <div class=\"form-group form-check\"> <input type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheck1\"> <label class=\"form-check-label\" for=\"exampleCheck1\">{{login.checkOutText}}<\/label> <\/div> <button type=\"submit\" class=\"btn btn-primary\">{{login.submitText}}<\/button>\n<\/form>\n<\/code><\/pre>\n
       Form The Json :<\/h3>\n
      The translation objects are resolved from the file path and the structure of the json files is as below:
      \u200b
      \"Capture222.PNG\"
      \u200b
      Forming the json in the files as the keys based upon the multilingual content you want. Say for example you are translating your content into two languages(en and fr) then the title would be formed as:
      \u200b
      \"Capture223.PNG\"<\/p>\n
       Output :<\/h3>\n
      Here is the output of the login component as below :<\/p>\n
      \"article-translate.gif\"<\/p>\n
      \u2022 Simple, Maintainable and Readable Translation Code.
      \u2022 Lazy Load Translation Content Component Wise with Angular PreLoadModule Stratergy.
      \u2022 Language Translation By URL or Code.
      \u2022 FormControl Error Message Translation.
      Powerful CLI with the features of Key Extraction, Optimize JSON, etc.<\/p>\n
      Fetch the implemetation of all the features of rxweb translate in the
      docs<\/a><\/p>\n