feat(i18n): add i18n support, closes #287

package.json

@@ -39,6 +39,8 @@
     "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
     "@ngrx/effects": "^6.0.1",
     "@ngrx/store": "^6.0.1",
+    "@ngx-translate/core": "^10.0.2",
+    "@ngx-translate/http-loader": "^3.0.1",
     "bootstrap": "^4.1.1",
     "browser-detect": "^0.2.27",
     "core-js": "^2.4.1",

src/app/app.component.html

@@ -1,11 +1,12 @@
 <mat-sidenav-container>
 
   <mat-sidenav #sidenav mode="push">
-    <div class="branding"><img [src]="logo"/> <span>Angular Starter</span></div>
+    <div class="branding"><img [src]="logo"/>
+      <span>{{ 'anms.title.short' | translate}}</span></div>
     <mat-nav-list>
       <a mat-list-item *ngFor="let item of navigationSideMenu" (click)="sidenav.close()"
          [routerLink]="[item.link]" routerLinkActive="active">
-        {{item.label}}
+        {{item.label | translate}}
       </a>
       <a mat-list-item
          href="https://github.com/tomastrajan/angular-ngrx-material-starter"
@@ -25,21 +26,21 @@
           <img [src]="logo"/></span>
       <span routerLink=""
             class="branding spacer center d-none d-sm-inline d-md-none"><img
-        [src]="logo"/> Angular Starter</span>
+        [src]="logo"/> {{ 'anms.title.short' | translate }}</span>
       <span routerLink="" class="branding spacer d-none d-md-inline"><img
-        [src]="logo"/> Angular NgRx Material Starter</span>
+        [src]="logo"/> {{ 'anms.title' | translate }}</span>
 
       <span class="d-none d-md-inline">
           <button mat-button class="nav-button" *ngFor="let item of navigation"
                   [routerLink]="[item.link]" routerLinkActive="active">
-            {{item.label}}
+            {{item.label | translate}}
           </button>
         </span>
 
       <button mat-button class="sign-in-button "
               *ngIf="!isAuthenticated"
               (click)="onLoginClick()">
-        Sign in
+        {{ 'anms.menu.login' | translate }}
       </button>
 
       <button *ngIf="isAuthenticated"
@@ -50,22 +51,31 @@
       <mat-menu #toolbarUserMenu="matMenu">
         <button mat-menu-item (click)="onLogoutClick()">
           <mat-icon fontSet="fas" fontIcon="fa-power-off"></mat-icon>
-          <span>Logout</span>
+          <span>{{ 'anms.menu.logout' | translate }}</span>
         </button>
       </mat-menu>
 
       <button mat-icon-button routerLink="settings" class="d-none d-sm-inline">
         <mat-icon fontSet="fas" fontIcon="fa-cog"></mat-icon>
       </button>
 
-      <a matTooltip="Project Github Repository"
+      <a [matTooltip]="'anms.header.github' | translate"
          matdTooltipPosition="before"
          mat-icon-button
          class="link d-none d-sm-inline"
          href="https://github.com/tomastrajan/angular-ngrx-material-starter"
          target="_blank">
         <mat-icon fontSet="fab" fontIcon="fa-github"></mat-icon>
       </a>
+
+      <span>
+        <mat-select [ngModel]="settings?.language"
+                    (selectionChange)="onLanguageSelect($event)">
+          <mat-option *ngFor="let l of languages" [value]="l">
+            {{ l.toUpperCase() }}
+          </mat-option>
+        </mat-select>
+      </span>
     </mat-toolbar>
   </div>
 
@@ -110,7 +120,7 @@
         <div class="col-12 signature">
           &#169; <span class="year">{{year}}</span> - Tomas Trajan
           <br class="d-block d-sm-none">
-          <a matTooltip="Show changelog"
+          <a [matTooltip]="'anms.footer.changelog' | translate"
              matTooltipPosition="before"
              href="https://github.com/tomastrajan/angular-ngrx-material-starter/blob/master/CHANGELOG.md">
             <mat-icon fontSet="fas" fontIcon="fa-rocket"></mat-icon>

src/app/app.component.scss

@@ -42,6 +42,12 @@ mat-sidenav-container {
       flex: 1 1 auto;
     }
 
+    mat-select {
+      margin: 0 0 0 20px;
+      width: 40px;
+      font-size: 14px;
+    }
+
     @media (max-width: map-get($grid-breakpoints, lg)) {
       .nav-button {
         min-width: 0;

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Title } from '@angular/platform-browser';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
 import { ActivationEnd, Router, NavigationEnd } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs';
 import { takeUntil, filter } from 'rxjs/operators';
@@ -20,6 +21,8 @@ import {
   NIGHT_MODE_THEME,
   selectorSettings,
   SettingsState,
+  ActionSettingsPersist,
+  ActionSettingsChangeLanguage,
   ActionSettingsChangeAnimationsPageDisabled
 } from './settings';
 
@@ -39,23 +42,27 @@ export class AppComponent implements OnInit, OnDestroy {
   version = env.versions.app;
   year = new Date().getFullYear();
   logo = require('../assets/logo.png');
+  languages = ['en', 'sk'];
   navigation = [
-    { link: 'about', label: 'About' },
-    { link: 'features', label: 'Features' },
-    { link: 'examples', label: 'Examples' }
+    { link: 'about', label: 'anms.menu.about' },
+    { link: 'features', label: 'anms.menu.features' },
+    { link: 'examples', label: 'anms.menu.examples' }
   ];
   navigationSideMenu = [
     ...this.navigation,
-    { link: 'settings', label: 'Settings' }
+    { link: 'settings', label: 'anms.menu.settings' }
   ];
-  isAuthenticated;
+
+  settings: SettingsState;
+  isAuthenticated: boolean;
 
   constructor(
     public overlayContainer: OverlayContainer,
     private store: Store<any>,
     private router: Router,
     private titleService: Title,
-    private animationService: AnimationsService
+    private animationService: AnimationsService,
+    private translate: TranslateService
   ) {}
 
   private static trackPageView(event: NavigationEnd) {
@@ -68,6 +75,7 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.translate.setDefaultLang('en');
     this.subscribeToSettings();
     this.subscribeToIsAuthenticated();
     this.subscribeToRouterEvents();
@@ -86,6 +94,11 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store.dispatch(new ActionAuthLogout());
   }
 
+  onLanguageSelect({ value: language }) {
+    this.store.dispatch(new ActionSettingsChangeLanguage({ language }));
+    this.store.dispatch(new ActionSettingsPersist({ settings: this.settings }));
+  }
+
   private subscribeToIsAuthenticated() {
     this.store
       .select(selectorAuth)
@@ -105,7 +118,9 @@ export class AppComponent implements OnInit, OnDestroy {
       .select(selectorSettings)
       .pipe(takeUntil(this.unsubscribe$))
       .subscribe(settings => {
+        this.settings = settings;
         this.setTheme(settings);
+        this.setLanguage(settings);
         this.animationService.updateRouteAnimationType(
           settings.pageAnimations,
           settings.elementsAnimations
@@ -131,6 +146,13 @@ export class AppComponent implements OnInit, OnDestroy {
     classList.add(effectiveTheme);
   }
 
+  private setLanguage(settings: SettingsState) {
+    const { language } = settings;
+    if (language) {
+      this.translate.use(language);
+    }
+  }
+
   private subscribeToRouterEvents() {
     this.router.events
       .pipe(

src/app/core/core.module.ts

@@ -1,9 +1,11 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { MetaReducer, StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { storeFreeze } from 'ngrx-store-freeze';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { environment } from '@env/environment';
 
@@ -37,10 +39,20 @@ if (!environment.production) {
       },
       { metaReducers }
     ),
-    EffectsModule.forRoot([AuthEffects])
+    EffectsModule.forRoot([AuthEffects]),
+
+    // 3rd party
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    })
   ],
   declarations: [],
-  providers: [LocalStorageService, AuthGuardService, AnimationsService]
+  providers: [LocalStorageService, AuthGuardService, AnimationsService],
+  exports: [TranslateModule]
 })
 export class CoreModule {
   constructor(
@@ -53,3 +65,7 @@ export class CoreModule {
     }
   }
 }
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}