Instructor: We run ng g s product/services/product to create our service. We open up product service and inject dependency called private HTTP of type HTTPClients. Below our imports we add a const inaudible base URL and set the value to a template literal. We'll take the value API URL from the environment we just created and append/products.
We now create a public method getProducts that does not take any parameters and returns an observable of type products array. In this method, we return this.http.get and pass in the base URL. We inaudible the get method, using a generic that we expect to retrieve an array of products.
Then, we add a public method getProducts that takes ID as a string and returns an observable of type products. We make it return this.http.get and pass in the base URL with the / and the ID appended to it.
In order to use those methods, we open product list components, and in our constructor, we inject PrivateService ProductService. In our ng onInit method, we call into this.service.getProducts, so try to that methods and assign the results to this.products.
When we reload our app, we see that we have an error message, "No provider for HTTPClients." In order to fix this, we open our app module and add HTTPClient module to our imports array, and make sure we import it from angular/common/http.
When we reload, we finally see the list of products being displayed and our error is gone. Let's update product inaudible components, inject PrivateService ProductService, and ng onInit this.servers to getProducts. We pass in the parameter we get from the router.
We subscribe to it and assign the results to this.product. We can now navigate through our app and see that products get loaded.