fix translate and save translate in local storage and add text translate

Author: Stivin

src/app/home/home.component.html

@@ -1,7 +1,3 @@
-<p>
-  home works!
-</p>
-<p>
-  {{"home" | translate}}
-</p>
+<h1>{{ "home.title" | translate }}</h1>
+<p>{{ "home.text" | translate }}</p>
 

src/app/home/home.module.ts

@@ -1,14 +1,15 @@
-import { HomeRoutes } from './home.routing';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HomeComponent } from './home.component';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { HomeRoutes } from './home.routing';
+import { HomeComponent } from './home.component';
+
 @NgModule({
   imports: [
     CommonModule,
     HomeRoutes,
-    TranslateModule
+    TranslateModule.forChild()
   ],
   declarations: [HomeComponent]
 })

src/app/mock-server-browser/mock-server-browser.component.html

@@ -1,7 +1,3 @@
-<p>
-  mock-server-browser works!
-</p>
-<p>
-  {{"mock" | translate}}
-</p>
+<h1>{{ "mock.title" | translate }}</h1>
+<p>{{ "mock.text" | translate }}</p>
 <app-mock></app-mock>

src/app/mock-server-browser/mock-server-browser.module.ts

@@ -1,19 +1,21 @@
-import { MockBrowserComponent } from './mock-browser/mock-browser.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { environment } from '../../environments/environment';
+
+import { MockBrowserComponent } from './mock-browser/mock-browser.component';
 import { MockServerBrowserComponent } from './mock-server-browser.component';
 import { MockServerBrowserRoutes } from './mock-server-browser.routing';
 import { MockBrowserModule } from './mock-browser/mock-browser.module';
 import { MockServerModule } from './mock-server/mock-server.module';
-import { environment } from '../../environments/environment';
-import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
   imports: [
     CommonModule,
     MockServerBrowserRoutes,
     environment.isServer ? [MockServerModule] : [MockBrowserModule],
-    TranslateModule
+    TranslateModule.forChild()
   ],
   declarations: [MockServerBrowserComponent]
 })

src/app/not-found/not-found.component.html

@@ -1,3 +1,2 @@
-<p>
-  not-found works!
-</p>
+<h1>{{ "not-found.title" | translate }}</h1>
+<p>404</p>

src/app/not-found/not-found.module.ts

@@ -1,13 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
 import { NotFoundComponent } from './not-found.component';
 import { NotFoundRoutes } from './not-found.routing';
 import { NotFoundService } from './not-found.service';
 
 @NgModule({
   imports: [
     CommonModule,
-    NotFoundRoutes
+    NotFoundRoutes,
+    TranslateModule.forChild()
   ],
   providers: [NotFoundService],
   declarations: [NotFoundComponent]

src/app/shared/layouts/sidebar/sidebar.component.ts

@@ -2,16 +2,16 @@ import { Component, OnInit } from '@angular/core';
 
 const LINKS: any[] = [
   { link: '/home', name: 'home', icon: 'home' },
-  { link: '/mock', name: 'mock', icon: 'accessibility' },
-  { link: '/back', name: 'back-http', icon: 'accessibility' },
+  { link: '/mock', name: 'mock', icon: 'info_outline' },
+  { link: '/back', name: 'back-http', icon: 'swap_vert' },
 ];
 
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html'
 })
 export class SidebarComponent implements OnInit {
-  public links: any[];
+  public links: any[] = [];
 
   ngOnInit() {
     this.links = LINKS.map(link => {

src/app/shared/layouts/toolbar/toolbar.component.html

@@ -1,7 +1,9 @@
 <span class="toolbar__logo">Angular RU Universal Starter</span>
 
 <select class="toolbar__lang" (change)="changeLang($event.target.value)">
-    <option *ngFor="let lang of languages" [value]="lang.value">
+    <option *ngFor="let lang of languages"
+            [value]="lang.value"
+            [selected]="lang.value === currentLang">
         {{ lang.name }}
     </option>
 </select>

src/app/shared/layouts/toolbar/toolbar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { TranslatesService } from '@shared/translates/translates.service';
 
@@ -11,12 +11,17 @@ const LANGUAGES: any[] = [
   selector: 'app-toolbar',
   templateUrl: './toolbar.component.html'
 })
-export class ToolbarComponent {
+export class ToolbarComponent implements OnInit {
   public languages: any[] = LANGUAGES;
+  public currentLang;
 
   constructor(private _translatesService: TranslatesService) {
   }
 
+  ngOnInit() {
+    this.currentLang = this._translatesService.getCurrentLang();
+  }
+
   public changeLang(lang: string): void {
     this._translatesService.changeLang(lang);
   }

src/app/shared/translates/translates.service.ts

@@ -1,15 +1,23 @@
 import { Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
-const DEFAULT_LANG: string = 'ru';
+const LANG_LIST: string[] = ['en', 'ru'];
+const DEFAULT_LANG: string = 'en';
 
 @Injectable()
 export class TranslatesService {
   constructor(private _translateService: TranslateService) {
+    this._translateService.addLangs(LANG_LIST);
     this._translateService.setDefaultLang(DEFAULT_LANG);
+    this._translateService.use(localStorage.getItem('lang') || DEFAULT_LANG);
+  }
+
+  public getCurrentLang(): string {
+    return this._translateService.currentLang;
   }
 
   public changeLang(lang: string): void {
+    localStorage.setItem('lang', lang);
     this._translateService.use(lang);
   }
 }