Added dummy service.

src/app/app-routing.module.ts

@@ -3,12 +3,12 @@ import { RouterModule, Routes }  from '@angular/router';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
-import { ProjectsComponent } from './components/projects/projects.component';
+import { PostsComponent } from './components/posts/posts.component';
  
 const appRoutes: Routes = [
 //   { path: 'crisis-center', component: CrisisListComponent },
   { path: 'home', component: HomeComponent },
-  { path: 'projects', component: ProjectsComponent },
+  { path: 'posts', component: PostsComponent },
   { path: '',   redirectTo: '/home', pathMatch: 'full' },
   { path: '**', component: AppComponent }
 ];

src/app/app.component.html

@@ -7,7 +7,7 @@
       <div id="topmenu" class="text-center">
         <!--each item is an icon-->
         <a routerLink="/home"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a>
-        <a routerLink="/projects"><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/posts"><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></a>
         <a routerLink="/cv"><i class="fa fa-user fa-2x" aria-hidden="true"></i></a>
       </div>
     </div>

src/app/app.module.ts

@@ -5,17 +5,14 @@ import { AppComponent } from './app.component';
 
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './components/home/home.component';
-import { ProjectsComponent } from './components/projects/projects.component';
-import { ProjectComponent } from './components/project/project.component';
 import { PostsComponent } from './components/posts/posts.component';
 import { PostComponent } from './components/post/post.component';
+import { DataloaderService } from 'app/services/dataloader.service';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    ProjectsComponent,
-    ProjectComponent,
     PostsComponent,
     PostComponent
   ],
@@ -23,7 +20,7 @@ import { PostComponent } from './components/post/post.component';
     BrowserModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [DataloaderService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -1,3 +1,6 @@
 <p>
   posts works!
 </p>
+
+<div *ngFor='let post of posts | async'> {{post.filename}} </div>
+

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

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { DataloaderService } from 'app/services/dataloader.service';
+import { Post } from '../../model/post';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-posts',
@@ -7,9 +10,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PostsComponent implements OnInit {
 
-  constructor() { }
+  posts:Observable<Post[]>;
+
+  constructor(private dataloaderService:DataloaderService) { }
 
   ngOnInit() {
+    //fetch the posts
+    this.posts = this.dataloaderService.getPosts();
   }
 
 }

src/app/model/post.ts

@@ -0,0 +1,9 @@
+export class Post {
+    filename:String;
+    date:Date;
+
+    constructor(filename:String) {
+        this.date = new Date();
+        this.filename = filename;
+    }
+}

src/app/services/dataloader.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DataloaderService } from './dataloader.service';
+
+describe('DataloaderService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DataloaderService]
+    });
+  });
+
+  it('should be created', inject([DataloaderService], (service: DataloaderService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/dataloader.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Post } from '../model/post';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+@Injectable()
+export class DataloaderService {
+
+  constructor() { }
+
+  getPosts(): Observable<Post[]> {
+    console.log('dataloadersdervice.getPosts called');
+    return of([new Post('placeholderservice')]);
+  }
+
+}