Let's carry out the following steps to create an asynchronous blog post service:

1. First, we will import our new service into our PostsModule so that it can be injected into any components in the module that need to use the service. We should also add our routes for our new PostListComponent so that it is the default child component in the router-outlet when navigating to /posts:

...
import { BlogPostsService } from "./blog-posts.service";
import { PostListComponent } from './post-list/post-list.component';

const ROUTES = [{
  path: "posts",
  component: PostsComponent,
  children: [
    {
      path: "",
      component: PostListComponent
    },
    {
      path: ":id",
      component: PostComponent
    }
  ]
}];

@NgModule({
  imports: [
    ...
    RouterModule.forChild(ROUTES)
  ],
  declarations: [
    ...
    PostListComponent
  ],
  providers: [BlogPostsService]
})
export class PostsModule {}

2. Let's set up our BlogPostsService with a set of mock blog posts. Eventually, this is the data-set that we will retrieve from an external API instead. We will return a promise instead of a static data set since we are expecting this to become asynchronous in the near future:

import { Injectable } from '@angular/core';
import {BlogPost} from "./blog-post";

export const POSTS: BlogPost[] = [
  new BlogPost('How data-binding works', "coming soon..."),
  new BlogPost('What's the deal with directives?', "coming soon..."),
  new BlogPost('Cha-cha-ng-ges...', "coming soon..."),
  new BlogPost('Components & services', "coming soon..."),
  new BlogPost('Express.js in a nutshell', "coming soon..."),
  new BlogPost('Hu-MONGO-ous DB', "coming soon..."),
  new BlogPost('Component Style Secrets', "coming soon..."),
  new BlogPost('Angular Deployment', "coming soon..."),
  new BlogPost('Internationalization Tips', "coming soon..."),
];

@Injectable()
export class BlogPostsService {
  getPosts(): Promise<BlogPost[]> {
    return Promise.resolve(POSTS);
  }
}

3. Next, we will need to upgrade our /src/app/posts/blog-post.ts model to include some more details for us about the author of the post and its published date. We'll use our new User model to make authors a reference to a specific user:

import {User} from "../user";
export class BlogPost {
  constructor(
    public title: string = "",
    public content: string = "",
    public published: Date = new Date(),
    public author: User = new User("Nicholas", "McClay", 
      "[email protected]")
  ) {}
}

4. Our new /src/app/posts/post-list.component.ts component will use our BlogPostsService to display the list of blog posts. Since getPosts returns an asynchronous promise, we will need to use the promise chain method to set up an asynchronous callback to get the array of blog posts:

import { Component, OnInit } from '@angular/core';
import {BlogPostsService} from "../blog-posts.service";
import {BlogPost} from "../blog-post";

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit {
  posts: BlogPost[];

  constructor(private blogPostsService: BlogPostsService) { }

  ngOnInit() {
    this.blogPostsService.getPosts().then(posts => this.posts = posts);
  }
}

5. Finally, we can create a view that will display all of our posts as a list of items to our users. We can use ngFor to loop through our posts and alias the post to the local variable, post:

<section class="row" *ngFor="let post of posts;">
  <div class="col col-sm-12">
    <div class="card">
      <div class="card-header">
        <small class="pull-left">
          Posted - {{ post.published | date:'shortDate' }}
        </small>
        <small class="pull-right">
          {{post.author.getName()}}
        </small>
      </div>
      <div class="card-block">
        <h4 class="card-title">{{post.title}}</h4>
        <p class="card-text">{{post.content}}</p>
      </div>
    </div>
  </div>
</section>

6. We now have a list of blog posts, including default author information and published dates.