Building the Products Service
Our application would be nothing without the data. In this course part you will display products images, description and prices in your Angular application.
Building the Products Service#
It's time to enable displaying products in your application. In this step, you are going to use product images that are available for download here. Place the images inside the src/assets/images folder in your project.
To generate the component and the service that you are going to implement, type the following commands in the terminal:
Before digging into the service, let's declare the
Product interface that you will use across the application. Create a new file called product.model.ts in the src/model directory and copy the following code:
ProductsService, add the following code to src/products.service.ts:
ProductsService is consuming two API endpoints:
GET /products that returns the list of all products (without product descriptions).
GET /products/:id that returns the full description of the product specified by the
Notice that you've assigned the value
/api to the
API_URL constant. From now on, you are going to run your frontend together with the backend. You don't need to specify the whole URL of the API anymore because it will be served from the same domain as the frontend. Apply the same modification in src/app/user.service.ts and change
Product details component#
You now need to add
ProductDetailsComponent to the application routing. Change routes in src/app-routing.module.ts to the following:
ProductDetailsComponent, replace the content of src/app/product-details/product-details.component.ts with the following TypeScript code: