Using our posts data to create a blog list

Next up we want to put that shiny new service to good use and display the results.

So lets change the main app component to show a 3x2 grid of the posts from the WordPress service.

First of all lets change the app.component.ts file to use our service.

So what is going on here?

We created a new observable variable called posts$, this is going to store the list of posts we are going to fetch from the API using the WordpressService.

We will use the async pipe to subscribe to this Observable in our app.component.html view file.

Here you can see we use the Material components to build a simple blog list page. We first add a toolbar with Blog List as it’s title. Next we add a page wrapper div to add some padding. Next comes the Flexy part, we use Angular Flex to create a row layout that wraps and adds a 16px gap between each element.

Inside the Flex Layout div we use Angular Material Card and loop through each post to create a card for each post.

The result looks like this.