Create an Angular Service to Retrieve Data from an API

Share this video with your friends

In this lesson we will create the ProductsService that is responsible for the interaction with our API.

We will inject the HttpClient that we get from @angular/common/http. To make this working we need to import HttpClientModule in our AppModule.

We define a getProducts and getProduct method so we can get a list of products and an single product which we will use in respectively the ProductList and ProductDetail components.

In both components we will use the ngOnInit lifecycle hook to invoke the methods on the service, and retrieve the data by subscribing to it.

Link to product api used in lessons

Martin Picard

~ 6 years ago

I had to create my own API server stub using json-server, not a big deal but would be easier if you included this

Bram Borggreve(instructor)

~ 6 years ago

I had to create my own API server stub using json-server, not a big deal but would be easier if you included this Hi Martin, thanks for your comment. I realized I didn't link to the repo with the API.

It has now been linked in the descriptions for both the lessons on the environment and the service.

For completeness sake, this is the repo: https://github.com/beeman/egghead-products-api