Homepage is now language-sensitive.

src/app/app.module.ts

@@ -19,6 +19,7 @@ import {FormsModule} from '@angular/forms';
 import {StateService} from './services/state.service';
 import { ContactComponent } from './components/contact/contact.component';
 import { RootComponent } from './components/root/root.component';
+import { LanguagetoggleComponent } from './components/languagetoggle/languagetoggle.component';
 
 @NgModule({
   declarations: [
@@ -31,7 +32,8 @@ import { RootComponent } from './components/root/root.component';
     SimpledatePipe,
     PosttagComponent,
     ContactComponent,
-    RootComponent
+    RootComponent,
+    LanguagetoggleComponent
   ],
   imports: [
     BrowserModule,

src/app/components/home/home.component.html

@@ -1,5 +1,15 @@
 <div class="panel panel-default">
   <div class="panel-body text-center pageintro">
-    These pages are a mish-mash of things that I'd like to keep safe. Descriptions and photos of projects, so I don't forget about them. Blog-style recollections of pieces of code, so I don't forget about them. Consider it a notepad of some kind.
+    <app-languagetoggle [language]="'en'">
+      These pages are a mish-mash of things that I'd like to keep safe. Descriptions and photos of projects, so I don't
+      forget about them. Blog-style recollections of pieces of code, so I don't forget about them. Consider it a notepad
+      of some kind.
+    </app-languagetoggle>
+    <app-languagetoggle [language]="'nl'">
+      Deze web pagina's zijn een samenraapsel van verschillende dingen: notities over technische oplossingen die ik niet
+      opnieuw wil opzoeken, foto's en beschrijvingen van projecten die ik gedaan heb en nog zou willen doen, curriculum
+      vitae ...  Kortom, alles wat je op een typische social media website zou vinden, maar dan in eigen beheer. Het is
+      ineens ook een excuus om wat met web technologie te prutsen, dat is altijd meegenomen.
+    </app-languagetoggle>
   </div>
 </div>

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {ActivatedRoute, ParamMap} from '@angular/router';
+import {StateService} from '../../services/state.service';
 
 @Component({
   selector: 'app-home',
@@ -8,15 +9,11 @@ import {ActivatedRoute, ParamMap} from '@angular/router';
 })
 export class HomeComponent implements OnInit {
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute,  private stateService: StateService) { }
 
   ngOnInit() {
-  console.log('homecomponent onInit')
     // fix up the language, fetch it from the route!
-    this.route.parent.paramMap.subscribe((params: ParamMap) => {
+    this.stateService.getLanguageFromRoute(this.route).subscribe(language => {console.log('homecomp gets: ' + language); });
-      console.log(params);
-      console.log(params.get('language'));
-    });
   }
 
 }

src/app/components/languagetoggle/languagetoggle.component.html

@@ -0,0 +1 @@
+<ng-content *ngIf="show"></ng-content>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LanguagetoggleComponent } from './languagetoggle.component';
+
+describe('LanguagetoggleComponent', () => {
+  let component: LanguagetoggleComponent;
+  let fixture: ComponentFixture<LanguagetoggleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LanguagetoggleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LanguagetoggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {StateService} from '../../services/state.service';
+
+@Component({
+  selector: 'app-languagetoggle',
+  templateUrl: './languagetoggle.component.html',
+  styleUrls: ['./languagetoggle.component.scss']
+})
+export class LanguagetoggleComponent implements OnInit {
+
+  /**
+   * This is the language for which the component is defined. Typically, when the currently set language is equal to this variable,
+   * the component will be visible.
+   */
+  @Input()
+  private language: string;
+
+  /**
+   * if this is set to true, the component will be visible
+   */
+  private show: boolean;
+
+  constructor(private route: ActivatedRoute, private stateService: StateService) {
+  }
+
+  ngOnInit() {
+    this.stateService.getLanguageFromRoute(this.route).subscribe(lang => {
+      console.log('languagetoggle gets this language:  '+ lang);
+      console.log('('+this.language+')')
+      if (lang === this.language) {
+        console.log('equalled! showing the component');
+        this.show = true;
+      } else {
+        console.log('not equalled! not showing the component');
+        this.show = false;
+      }
+    });
+  }
+
+}

src/app/services/state.service.ts

@@ -1,11 +1,11 @@
-import { Injectable } from '@angular/core';
+import {Injectable, OnInit} from '@angular/core';
 import {Post} from '../model/post';
 import {ActivatedRoute, ParamMap} from '@angular/router';
 import 'rxjs/add/operator/filter';
+import {Observable} from 'rxjs/Observable';
 
 @Injectable()
 export class StateService {
-
   // this keeps track of which type is enabled / disabled
   tagFilter: any = [];
 
@@ -13,6 +13,19 @@ export class StateService {
 
   }
 
+  /**
+   * Get the language currently set in the router.
+   *
+   * @param {ActivatedRoute} route
+   * @returns {Observable<string>}
+   */
+  getLanguageFromRoute(route: ActivatedRoute): Observable<string> {
+    return route.parent.paramMap.map((params: ParamMap) => {
+      const temp = params.get('language');
+      return temp;
+    });
+  }
+
   shouldDisplay(post: Post): boolean {
     // check whether all filters are true or false: that case, just show everything
     let foundTrue = false;
@@ -31,7 +44,7 @@ export class StateService {
       return true;
     }
     if (!foundTrue && !foundFalse) {
-    // some weird case, just show everything
+      // some weird case, just show everything
       return true;
     }
 
@@ -47,14 +60,14 @@ export class StateService {
   }
 
   isActiveTag(tag: string): boolean {
-  //  console.log('isActive');
+    //  console.log('isActive');
-  //  console.log(this.tagFilter);
+    //  console.log(this.tagFilter);
     return this.tagFilter[tag] === true;
   }
 
   toggleTag(tag: string) {
-   // console.log('toggle');
+    // console.log('toggle');
-   // console.log(this.tagFilter);
+    // console.log(this.tagFilter);
     if (this.tagFilter[tag] == null) {
       this.tagFilter[tag] = true;
     } else {