Preparing Services to Interact with the Data
In this lesson, we will add the products using a dummy API, increase the cart count when the product is added to the cart, and so on.
We'll cover the following...
We have the relevant components and routing in place now.
On the first view, the home view, we have a simple welcome component called HomeComponent. We get to explore and look for products from this view.
It looks something like this. Now to add a router link to go to the products view, we will add a routerLink directive on the click of this button:
<button class="btn btn-info" routerLink="/products">Search products</button>
The idea now is to fetch the products on the rendering of the products view. We can perform this using either JSON data, an in-memory data store, or a dummy API.
For this application, we will be using the API from jsonplaceholder.com to get the list of products.
As we have looked at lifecycle hooks, we know that on the instantiation of the view, ngOnInit is invoked.
So, we should be performing the request for the data in this method.
Retrieve Products
ngOnInit(): void {