Ok, home and posts work with languages now.

src/app/components/post/post.component.ts

@@ -29,6 +29,13 @@ export class PostComponent implements OnInit {
       this.htmlContainer.nativeElement.innerHTML = content;
     });
 
+    this.stateService.getLanguageObservable().subscribe(language => {
+      // change the content: language has been updated
+      this.dataloaderService.getFullHtml(this.post, language).subscribe(content => {
+        this.htmlContainer.nativeElement.innerHTML = content;
+      });
+    });
+
     console.log('PostComponent.ngOnInit is done.');
   }
 

src/app/components/posts/posts.component.html

@@ -8,5 +8,5 @@
 </div>
 
 <div>
-  <app-post *ngFor='let post of postsToDisplay()' [post]="post"></app-post>
+  <app-post *ngFor='let post of filteredPosts' [post]="post"></app-post>
 </div>

src/app/components/posts/posts.component.ts

@@ -16,7 +16,8 @@ import 'rxjs/add/operator/distinct';
 })
 export class PostsComponent implements OnInit, OnDestroy {
 
-  posts: Post[];
+  allPosts: Post[];
+  filteredPosts:  Post[];
   tags = new Array<string>();
 
   constructor(private dataloaderService: DataloaderService, private stateService: StateService) {
@@ -31,14 +32,12 @@ export class PostsComponent implements OnInit, OnDestroy {
     // console.log('PostsComponent ngOnInit()');
     // fetch the posts
     const posts2 = this.dataloaderService.getPosts();
-    // subscribing means big fat memory leak
-    // TODO fix this!!!
     posts2.subscribe(p => {
-      this.posts = p;
+      this.allPosts = p;
 
       //figure out the different tags so we can filter on them
       const temptags = new Array<string>();
-      this.posts.forEach(p => p.tags.forEach(t => temptags.push(t)));
+      this.allPosts.forEach(p => p.tags.forEach(t => temptags.push(t)));
       console.log(temptags);
       //copy the temptags into the tags array, don't include duplicates
       temptags.forEach(tt => {
@@ -48,41 +47,54 @@ export class PostsComponent implements OnInit, OnDestroy {
       });
       //sort the array
       this.tags.sort((a, b) => a.localeCompare(b));
+
+      //do the first filtered update!
+      this.updateFilteredPosts(this.stateService.getLanguage());
     });
     console.log('PostsComponent ngOnInit() is done');
+
+    //we start listening to language changes
+    this.stateService.getLanguageObservable().subscribe(language=>{
+      console.log('posts component needs to switch languages!');
+      this.updateFilteredPosts(language);
+    });
+
   }
 
   filterOnType(type: String): void {
 
   }
 
-  postsToDisplay(): Post[] {
-    //console.log('postsToDisplay called');
+  /**
+   * Something happened and we need to update our filtering. This includes the tags or language changes. Afterwards, 'filteredPosts' should
+   * contain the new modified list of posts.
+   * @returns {Post[]}
+   */
+  updateFilteredPosts(language: string) {
+    console.log('updating filtered posts for language '+language);
     const res = new Array<Post>();
-    if (this.posts == null) {
+    if (this.allPosts == null) {
       return res;
     }
-    for (const post of this.posts) {
+    for (const post of this.allPosts) {
       // console.log(post);
       if (this.stateService.shouldDisplay(post)) {
         // console.log('we should display this');
         // also check the language!
         // console.log(post.languages + ' ' + this.stateService.getLanguage());
-        if (post.languages !== undefined && post.languages.indexOf(this.stateService.getLanguage()) >= 0) {
+        if (post.languages !== undefined && post.languages.indexOf(language) >= 0) {
           res.push(post);
         }
       } else {
         // console.log('we should not display this');
       }
     }
-
-    //console.log('displaying: '+res.length);
-    return res;
+    this.filteredPosts = res;
   }
 
-
   toggleTag(tag: string) {
     this.stateService.toggleTag(tag);
+    this.updateFilteredPosts(this.stateService.getLanguage());
   }
 
   isActiveTag(tag: string): boolean {

src/app/services/dataloader.service.ts

@@ -49,7 +49,7 @@ export class DataloaderService {
       console.log(`post with id ${post.id} has no languages defined...`);
       return Observable.of('You encounter a pirate without a tongue. Curious.');
     }
-    if (post.languages.indexOf(language) !== 1) {
+    if (post.languages.indexOf(language) !== -1) {
       // language is defined!
       const url = `assets/post/${post.id}/full-${language}.html`;
       return this.http.get(url, {responseType: 'text'});

src/app/services/state.service.ts

@@ -31,7 +31,7 @@ export class StateService {
 
   shouldDisplay(post: Post): boolean {
 
-    console.log('state service url: ' + this.router.url);
+    // console.log('state service url: ' + this.router.url);
 
     // check whether all filters are true or false: that case, just show everything
     let foundTrue = false;
@@ -133,7 +133,7 @@ export class StateService {
     }
   }
 
-  getLanguageObservable(route: ActivatedRoute) {
+  getLanguageObservable() {
     return this.rootRoute.paramMap.map(map => map.get('language'));
   }