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:

Products service#

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:

To implement 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 :id query parameter.

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 API_URL accordingly.

Product details component#

You now need to add ProductDetailsComponent to the application routing. Change routes in src/app-routing.module.ts to the following:

To consume ProductsService in ProductDetailsComponent, replace the content of src/app/product-details/product-details.component.ts with the following TypeScript code:

 

This page is a preview of The newline Guide to Angular Universal

No discussions yet