Language toggle is working!

src/app/components/home/home.component.ts

@@ -13,7 +13,7 @@ export class HomeComponent implements OnInit {
 
   ngOnInit() {
     // fix up the language, fetch it from the route!
-    this.stateService.getLanguageFromRoute(this.route).subscribe(language => {console.log('homecomp gets: ' + language); });
+    this.stateService.getLanguageFromRoute(this.route.parent).subscribe(language => {console.log('homecomp gets: ' + language); });
   }
 
 }

src/app/components/languagetoggle/languagetoggle.component.ts

@@ -19,21 +19,26 @@ export class LanguagetoggleComponent implements OnInit {
   /**
    * if this is set to true, the component will be visible
    */
-  private show: boolean;
+  private show = false;
 
   constructor(private route: ActivatedRoute, private stateService: StateService) {
   }
 
   ngOnInit() {
     this.stateService.getLanguageFromRoute(this.route).subscribe(lang => {
-      console.log('languagetoggle gets this language:  '+ lang);
+      console.log('languagetoggle gets this language:  ' + lang);
-      console.log('('+this.language+')')
+      console.log('(' + this.language + ')')
       if (lang === this.language) {
-        console.log('equalled! showing the component');
+        console.log('equalled (first level of route)! showing the component');
+        this.show = true;
+      }
+    });
+    this.stateService.getLanguageFromRoute(this.route.parent).subscribe(lang => {
+      console.log('languagetoggle gets this language from parent:  ' + lang);
+      console.log('(' + this.language + ')')
+      if (lang === this.language) {
+        console.log('equalled (parent level of route)! showing the component');
         this.show = true;
-      } else {
-        console.log('not equalled! not showing the component');
-        this.show = false;
       }
     });
   }

src/app/components/root/root.component.html

@@ -21,6 +21,7 @@
           <a routerLink="/home" (mouseout)="mouseOut('home')" (mouseover)="mouseOver('home')"><i class="fa fa-home fa-fw fa-2x" aria-hidden="true"></i></a>
           <a routerLink="/posts" (mouseout)="mouseOut('posts')" (mouseover)="mouseOver('posts')"><i class="fa fa-sticky-note fa-fw  fa-2x" aria-hidden="true"></i></a>
           <a routerLink="/cv" (mouseout)="mouseOut('cv')" (mouseover)="mouseOver('cv')"><i class="fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i></a>
+          <a (click)="toggleLanguage()" (mouseout)="mouseOut('language setting')" (mouseover)="mouseOver('language setting')"><i class="fa fa-language fa-fw fa-2x" aria-hidden="true"></i></a>
         </div>
       </div>
     </div>
@@ -30,7 +31,7 @@
   <div class="row">
     <div class="col-md-8 offset-md-2">
       <div class="pagetype">
-        {{getPageType()}}
+        {{pageType$ | async}}
       </div>
     </div>
   </div>

src/app/components/root/root.component.scss

@@ -69,7 +69,7 @@
   //background-color: aqua;
   position: absolute;
   width: 100%;
-  bottom: -3px;
+  bottom: 0px;
   left: 0px;
   font-size: 89%;
   text-align: center;

src/app/components/root/root.component.ts

@@ -1,5 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
+import {StateService} from '../../services/state.service';
+import {Observable} from 'rxjs/Observable';
+
+import 'rxjs/add/operator/first';
 
 @Component({
   selector: 'app-root',
@@ -10,24 +14,33 @@ export class RootComponent implements OnInit {
 
   title = 'Joachim Homepage';
   mousingOver: string = null;
+  pageType$: Observable<string>;
 
-  constructor(private router: Router, private route: ActivatedRoute) { }
+  constructor(private router: Router, private route: ActivatedRoute, private stateService: StateService) {
+  }
 
   ngOnInit() {
     console.log('oninit of root component');
     this.route.paramMap.subscribe(val => console.log(val));
-  }
+
-  getPageType() {
+    this.stateService.getLanguageFromRoute(this.route).subscribe(val => {console.log('ngoninit root' + val)});
-    if (this.router.url.endsWith('posts')) {
+
+    this.pageType$ = this.stateService.getLanguageFromRoute(this.route).map(language => {
+      if (this.router.url.endsWith('posts')) {
         return 'Posts';
-    }
+      }
-    if (this.router.url.endsWith('cv')) {
+      if (this.router.url.endsWith('cv')) {
-      return 'Curricululm Vitae';
+        return 'Curriculum Vitae';
-    }
+      }
-    if ( this.router.url.endsWith('home')) {
+      if (this.router.url.endsWith('home')) {
-      return 'Home';
+        if (language === 'nl') {
-    }
+          return 'Intro';
-    return 'Joa did something wrong...'
+        } else {
+          return 'Home';
+        }
+      }
+      return 'Joa did something wrong...'
+    });
   }
 
   mouseOver(s: string) {
@@ -38,4 +51,16 @@ export class RootComponent implements OnInit {
   mouseOut(s: string) {
     this.mousingOver = null;
   }
+
+  toggleLanguage() {
+    this.stateService.getLanguageFromRoute(this.route).first().subscribe(val => {
+      if (val === 'nl') {
+        this.stateService.setLanguage('en', this.route, this.router);
+      } else if (val === 'en') {
+        this.stateService.setLanguage('nl', this.route, this.router);
+      } else {
+        console.log('Could not toggle the language, pirates stole your tongue.');
+      }
+    });
+  }
 }

src/app/services/state.service.ts

@@ -1,6 +1,6 @@
 import {Injectable, OnInit} from '@angular/core';
 import {Post} from '../model/post';
-import {ActivatedRoute, ParamMap} from '@angular/router';
+import {ActivatedRoute, ParamMap, Router} from '@angular/router';
 import 'rxjs/add/operator/filter';
 import {Observable} from 'rxjs/Observable';
 
@@ -20,7 +20,7 @@ export class StateService {
    * @returns {Observable<string>}
    */
   getLanguageFromRoute(route: ActivatedRoute): Observable<string> {
-    return route.parent.paramMap.map((params: ParamMap) => {
+    return route.paramMap.map((params: ParamMap) => {
       const temp = params.get('language');
       return temp;
     });
@@ -74,4 +74,24 @@ export class StateService {
       this.tagFilter[tag] = !this.tagFilter[tag];
     }
   }
+
+  setLanguage(language: string, route: ActivatedRoute, router: Router) {
+    console.log('setting language: '+language);
+    // // check out the current route
+    // route.pathFromRoot.forEach(path=>{
+    //   console.log(path);
+    //   console.log(path.routeConfig);
+    // });
+    router.navigate([language]);
+
+    // route.url.subscribe(segments => {
+    //   console.log(segments);
+    //   //now also do the children
+    //   route.children.forEach(child => {
+    //     child.url.subscribe(childsegment => {
+    //       console.log(childsegment);
+    //     });
+    //   });
+    // });
+  }
 }