feat(i18n): integrate internationalization and russian language support

Author: musienkoyuriy

package-lock.json

@@ -39,6 +39,8 @@
     "@angular/platform-browser": "4.4.4",
     "@angular/platform-browser-dynamic": "4.4.4",
     "@angular/router": "4.4.4",
+    "@ngx-translate/core": "8.0.0",
+    "@ngx-translate/http-loader": "2.0.0",
     "@types/hammerjs": "2.0.35",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

package.json

@@ -7,7 +7,7 @@
       <mat-sidenav #sidenav role="navigation">
         <mat-nav-list (click)="sidenav.toggle()">
           <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
-            {{menu.title}}
+            {{menu.title | translate}}
           </a>
         </mat-nav-list>
       </mat-sidenav>

src/app/app.component.html

@@ -1,4 +1,5 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
+import { LanguageService } from './services/language.service';
 
 interface Menu {
   title: string;
@@ -7,31 +8,37 @@ interface Menu {
 }
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   menus: Menu[] = [
     {
-      title: "Home",
-      link: "/",
+      title: 'MENU.HOME',
+      link: '/',
       options: { exact: true }
     },
     {
-      title: "Operators",
-      link: "/operators",
+      title: 'MENU.OPERATORS',
+      link: '/operators',
       options: { exact: false }
     },
     {
-      title: "Companies",
-      link: "/companies",
+      title: 'MENU.COMPANIES',
+      link: '/companies',
       options: { exact: false }
     },
     {
-      title: "Team",
-      link: "/team",
+      title: 'MENU.TEAM',
+      link: '/team',
       options: { exact: false }
     }
   ];
+
+  constructor(private languageService: LanguageService) {}
+
+  ngOnInit() {
+    this.languageService.init(['en', 'ru']);
+  }
 }

src/app/app.component.ts

@@ -1,12 +1,25 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { NgModule } from "@angular/core";
-import { RouterModule, PreloadAllModules } from "@angular/router";
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { RouterModule, PreloadAllModules } from '@angular/router';
 
-import { AppComponent } from "./app.component";
-import { RXJS_DOC_ROUTES } from "./app.routing";
-import { ToolbarModule } from "./toolbar/toolbar.module";
-import { MatSidenavModule, MatListModule } from "@angular/material";
+import { AppComponent } from './app.component';
+import { RXJS_DOC_ROUTES } from './app.routing';
+import { ToolbarModule } from './toolbar/toolbar.module';
+import { MatSidenavModule, MatListModule } from '@angular/material';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import {
+  TranslateModule,
+  TranslatePipe,
+  TranslateService,
+  TranslateLoader
+} from '@ngx-translate/core';
+import { LanguageService } from './services/language.service';
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
 
 @NgModule({
   declarations: [AppComponent],
@@ -16,11 +29,19 @@ import { MatSidenavModule, MatListModule } from "@angular/material";
     ToolbarModule,
     MatListModule,
     MatSidenavModule,
+    HttpClientModule,
     RouterModule.forRoot(RXJS_DOC_ROUTES, {
       preloadingStrategy: PreloadAllModules
+    }),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
     })
   ],
-  providers: [],
+  providers: [TranslateService, LanguageService, TranslatePipe],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/app.module.ts

@@ -1,4 +1,4 @@
-<h2> Additional Resources </h2>
+<h2> {{ 'OPERATOR.ADDITIONAL_RESOURCES' | translate }} </h2>
 <ul class="section-list">
   <li>
     <a [href]="sourceUrl" target="_blank"> Source Code </a>

src/app/operators/components/additional-resources/additional-resources.component.html

@@ -1,11 +1,11 @@
-<h2> Examples </h2>
+<h2> {{ 'OPERATOR.EXAMPLES' | translate }} </h2>
 <div
   class="code-example"
   *ngFor="let example of operatorExamples"
   appHighlightJs>
   <div class="code-block mat-elevation-z2">
     <div class="example-header">
-      <div class="header-title" [innerHTML]="example.name"></div>
+      <div class="header-title" [innerHTML]="example.name[currentLang]"></div>
       <button
         mat-icon-button
         ngxClipboard

src/app/operators/components/operator-examples/operator-examples.component.html

@@ -8,4 +8,5 @@ import { OperatorExample } from '../../../../operator-docs';
 })
 export class OperatorExamplesComponent {
   @Input() operatorExamples: OperatorExample[];
+  @Input() currentLang = 'en';
 }

src/app/operators/components/operator-examples/operator-examples.component.ts

@@ -1,19 +1,19 @@
-<h2> Parameters </h2>
+<h2> {{ 'OPERATOR.PARAMETERS.TITLE' | translate }} </h2>
 <table class="parameter-table mat-elevation-z2">
   <thead>
     <tr>
-      <th>Name</th>
-      <th>Type</th>
-      <th>Attribute</th>
-      <th>Description</th>
+      <th>{{'OPERATOR.PARAMETERS.NAME' | translate}}</th>
+      <th>{{'OPERATOR.PARAMETERS.TYPE' | translate}}</th>
+      <th>{{'OPERATOR.PARAMETERS.ATTRIBUTE' | translate}}</th>
+      <th>{{'OPERATOR.PARAMETERS.DESCRIPTION' | translate}}</th>
     </tr>
   </thead>
   <tbody>
     <tr *ngFor="let parameter of operatorParameters">
       <td> {{parameter.name}} </td>
       <td> {{parameter.type}} </td>
       <td> {{parameter.attribute}} </td>
-      <td> {{parameter.description}} </td>
+      <td> {{parameter.description[currentLang]}} </td>
     </tr>
   </tbody>
 </table>

src/app/operators/components/operator-parameters/operator-parameters.component.html

@@ -1,11 +1,12 @@
-import { Component, Input } from '@angular/core';
-import { OperatorParameters } from '../../../../operator-docs';
+import { Component, Input } from "@angular/core";
+import { OperatorParameters } from "../../../../operator-docs";
 
 @Component({
-  selector: 'app-operator-parameters',
-  templateUrl: './operator-parameters.component.html',
-  styleUrls: ['./operator-parameters.component.scss']
+  selector: "app-operator-parameters",
+  templateUrl: "./operator-parameters.component.html",
+  styleUrls: ["./operator-parameters.component.scss"]
 })
 export class OperatorParametersComponent {
   @Input() operatorParameters: OperatorParameters[];
+  @Input() currentLang = "en";
 }