feat(storage): add ngx-store module to save language in local storage

Author: Ismaestro

README.md

@@ -71,6 +71,7 @@ npm run update           | Update the project dependencies with ng update
 * Lazy loading modules
 * Service Workers
 * Dynamic Imports
+* Storage module (ngx-store)
 * More logical structure directory (from [here](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7))
 * Basic example library
 * Scroll restoration and anchor examples

package-lock.json

@@ -5,6 +5,7 @@ import {NavigationEnd, Router} from '@angular/router';
 import {MatSnackBar} from '@angular/material';
 import {_} from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
 import {AppConfig} from './configs/app.config';
+import {LocalStorage} from 'ngx-store';
 
 declare const require;
 declare const Modernizr;
@@ -16,6 +17,7 @@ declare const Modernizr;
 
 export class AppComponent implements OnInit {
 
+  @LocalStorage() language = 'en';
   isOnline: boolean;
 
   constructor(private translateService: TranslateService,
@@ -28,12 +30,18 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
     this.translateService.setDefaultLang('en');
-    this.translateService.use('en');
+    this.translateService.use(this.language);
 
     // With this we load the default language in the main bundle (cache busting)
     this.translateService.setTranslation('en', require('../assets/i18n/en.json'));
 
     this.title.setTitle('Angular Example App');
+
+    this.onEvents();
+    this.checkBrowserFeatures();
+  }
+
+  onEvents() {
     this.router.events.subscribe((event: any) => {
       if (event instanceof NavigationEnd) {
         switch (event.urlAfterRedirects) {
@@ -53,8 +61,6 @@ export class AppComponent implements OnInit {
         }
       }
     });
-
-    this.checkBrowserFeatures();
   }
 
   checkBrowserFeatures() {

src/app/app.component.ts

@@ -3,6 +3,7 @@ import {TranslateService} from '@ngx-translate/core';
 import {_} from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
 import {APP_CONFIG, AppConfig} from '../../../configs/app.config';
 import {ProgressBarService} from '../../../core/services/progress-bar.service';
+import {LocalStorage} from 'ngx-store';
 
 @Component({
   selector: 'app-header',
@@ -12,6 +13,8 @@ import {ProgressBarService} from '../../../core/services/progress-bar.service';
 
 export class HeaderComponent implements OnInit {
 
+  @LocalStorage() language = 'en';
+
   appConfig: any;
   menuItems: any[];
   progressBarMode: string;
@@ -34,6 +37,7 @@ export class HeaderComponent implements OnInit {
   changeLanguage(language: string): void {
     this.translateService.use(language).subscribe(() => {
       this.loadMenus();
+      this.language = language;
     });
   }
 

src/app/shared/components/header/header.component.ts

@@ -14,6 +14,7 @@ import {Error404PageComponent} from './pages/error404-page/error404-page.compone
 import {HeroCardComponent} from './components/hero-card/hero-card.component';
 import {ScrollToFirstInvalidDirective} from './directives/scroll-to-first-invalid.directive';
 import {NgxExampleLibraryModule} from '@ismaestro/ngx-example-library';
+import {WebStorageModule} from 'ngx-store';
 
 @NgModule({
   imports: [
@@ -23,7 +24,8 @@ import {NgxExampleLibraryModule} from '@ismaestro/ngx-example-library';
     TranslateModule.forChild(),
     ReactiveFormsModule,
     RouterModule,
-    NgxExampleLibraryModule
+    NgxExampleLibraryModule,
+    WebStorageModule
   ],
   declarations: [
     HomePageComponent,
@@ -41,6 +43,7 @@ import {NgxExampleLibraryModule} from '@ismaestro/ngx-example-library';
     FlexLayoutModule,
     TranslateModule,
     NgxExampleLibraryModule,
+    WebStorageModule,
     HeaderComponent,
     SearchBarComponent,
     FooterComponent,