Finished posts layout.

src/app/app.component.html

@@ -29,7 +29,7 @@
   <div class="row">
     <div class="col-md-8 offset-md-2">
       <div class="pagetype">
-        Posts
+        {{getPageType()}}
       </div>
     </div>
   </div>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, AfterViewChecked } from "@angular/core";
+import {Router} from '@angular/router';
 declare var $: any;
 
 @Component({
@@ -9,6 +10,17 @@ declare var $: any;
 export class AppComponent implements OnInit {
   title = 'Joachim Homepage';
 
+  constructor(private router:Router) {}
+
   ngOnInit() {
   }
+
+  getPageType() {
+    switch (this.router.url) {
+      case '/posts': return 'Posts';
+      case '/cv': return 'Curriculum Vitae';
+      case '/home': return 'Home';
+      default: return 'Unknown path';
+    }
+  }
 }

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { PosttypepipePipe } from './pipes/posttypepipe.pipe';
 
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import {SimpledatePipe} from './pipes/simpledate.pipe';
+import { PosttagComponent } from './components/post/posttag/posttag.component';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import {SimpledatePipe} from './pipes/simpledate.pipe';
     PostComponent,
     CvComponent,
     PosttypepipePipe,
-    SimpledatePipe
+    SimpledatePipe,
+    PosttagComponent
   ],
   imports: [
     BrowserModule,

src/app/components/post/post.component.html

@@ -7,7 +7,9 @@
       {{post.title}}
     </div>
     <div class="post-tags">
-      {{post.type}}(T)(P)
+      <div class="post-tag" *ngFor="let tag of post.tags">
+        <app-posttag [tag] = tag></app-posttag>
+      </div>
     </div>
   </div>
   <div class="post-body" #htmlcontainer></div>

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

@@ -19,10 +19,11 @@ export class PostComponent implements OnInit {
     // console.log('post component has inited: '+this.post.id);
     // console.log(this.post);
 
-    console.log('PostComponent is loading: '+this.post.id);
+    //console.log('PostComponent is loading: '+this.post.id);
+    //console.log(this.post);
 
     this.dataloaderService.getPost(this.post.id).subscribe(content => {
-      console.log('PostComponent got content for '+this.post.id);
+      //console.log('PostComponent got content for '+this.post.id);
       //this is not the cause of the memory leak:\
       this.htmlContainer.nativeElement.innerHTML = content;
     });

src/app/components/post/posttag/posttag.component.html

@@ -0,0 +1,5 @@
+<div [ngSwitch]="tag" title="{{tag}}">
+  <ng-template [ngSwitchCase]= "'tech'"><i class="fa fa-wrench"></i></ng-template>
+  <ng-template [ngSwitchCase]= "'project'"><i class="fa fa-map"></i></ng-template>
+  <ng-template ngSwitchDefault><i class="fa fa-question-circle"></i></ng-template>
+</div>

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

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

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

@@ -0,0 +1,19 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Post} from '../../../model/post';
+
+@Component({
+  selector: 'app-posttag',
+  templateUrl: './posttag.component.html',
+  styleUrls: ['./posttag.component.scss']
+})
+export class PosttagComponent implements OnInit {
+
+  @Input() tag: string;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/model/post.ts

@@ -1,9 +1,10 @@
-export class Post {     
+export class Post {
 
     type: string;
     title: any;
     id:String;
     created_timestamp: Date;
+    tags: string[];
 
     constructor(id:String) {
         this.id = id;

src/app/services/dataloader.service.ts

@@ -19,11 +19,12 @@ export class DataloaderService {
       for (const index in posts) {
           console.log('DataLoader.getPosts() index '+index);
           const post: any = posts[index];
-          // console.log('got this key: '+post);
+          console.log('got this key: '+post);
-          // console.log(post);
+          console.log(post);
           const temp: Post = new Post(post.id);
           temp.title = post.info.title;
           temp.type = post.type;
+          temp.tags = post.info.tags;
           console.log('got this timestamp: ' + post.info.created_timestamp);
           temp.created_timestamp = new Date(post.info.created_timestamp * 1000);
           console.log('converted it to this: ' + temp.created_timestamp);

src/assets/post/cupboard1/info.json

@@ -1 +1 @@
-{"created_timestamp": 1515094644.215065, "title": "cupboard"}
+{"created_timestamp": 1515094644.215065, "title": "cupboard", "tags":["project"]}

src/assets/post/first/info.json

@@ -1 +1 @@
-{"created_timestamp": 1515094679.342938, "title": "Who said Web 1.0 was dead anyway?"}
+{"created_timestamp": 1515094679.342938, "title": "Who said Web 1.0 was dead anyway?", "tags":["blog"]}

src/assets/post/lxdarch/info.json

@@ -1 +1 @@
-{"created_timestamp": 1515094644.215333, "title": "some things about lxc in arch"}
+{"created_timestamp": 1515094644.215333, "title": "some things about lxc in arch", "tags":["tech"]}

src/assets/post/test/info.json

@@ -1,4 +1,5 @@
 {
     "created_timestamp": 1515095948.838848,
-    "title": "Test title"
+    "title": "Test title",
-}
+    "tags":["tech", "blog"]
+}

src/assets/posts.json

@@ -1 +1 @@
-[{"info": {"created_timestamp": 1515094679.342938, "title": "Who said Web 1.0 was dead anyway?"}, "id": "first"}, {"info": {"created_timestamp": 1515094644.215065, "title": "cupboard"}, "id": "cupboard1"}, {"info": {"created_timestamp": 1515095948.838848, "title": "Test title"}, "id": "test"}, {"info": {"created_timestamp": 1515094644.215333, "title": "some things about lxc in arch"}, "id": "lxdarch"}]
+[{"info": {"created_timestamp": 1515094679.342938, "tags": ["blog"], "title": "Who said Web 1.0 was dead anyway?"}, "id": "first"}, {"info": {"created_timestamp": 1515094644.215065, "tags": ["project"], "title": "cupboard"}, "id": "cupboard1"}, {"info": {"created_timestamp": 1515095948.838848, "tags": ["tech", "blog"], "title": "Test title"}, "id": "test"}, {"info": {"created_timestamp": 1515094644.215333, "tags": ["tech"], "title": "some things about lxc in arch"}, "id": "lxdarch"}]