Creating Concurrent API requests in Angular

What if a component in our application requires multiple asynchronous HTTP requests to properly display the correct information? For example, what if we also needed to load the blog's metadata to fetch the total number of blog posts? We can do this using the Promise standard's all callback to run all our asynchronous requests simultaneously while still returning a single result when they complete.

Getting ready

Let's add a new API request to our blog service for getting the total count of Angular blog posts. We'll show this count and its link to the official Angular blog in the header of our PostsList component template. We can fetch this metadata from the default blog API endpoint:

https://www.googleapis.com/blogger/v3/blogs/7159470537406093899?key={API KEY}

How to do it...

Let's perform the following steps to add caching to our blog posts:

1. First, let's add a new method to our /src/app/posts/blog-posts.service.ts service to request the blog's metadata...