# Webshop Product List and Detail view with Angular #### How To Build A Serverless Webshop This is a 6 parts series to build a webshop application with [Angular](https://angular.io/), [Netlify](https://www.netlify.com/) Serverless functions in combination with [FaunaDB](https://dashboard.fauna.com/accounts/register?utm_source=Medium&utm_medium=referral&utm_campaign=WritewithFauna_BuildServerlessWebshopWorkshop_part2_Raymon). ### Series 1. [Connect Angular and FaunaDB with Netlify Serverless functions](https://medium.com/how-to-build-a-serverless-webshop/how-to-build-a-serverless-webshop-3dabd13b0ac7) 2. **Product list and detail view with Angular** 3. [Create crud for products and show products on an Angular page](https://medium.com/dev-together/create-crud-for-managing-webshop-products-e85981503130) In this part of the series, we are going to explore how to get product data from the [FaunaDB](https://dashboard.fauna.com/accounts/register?utm_source=Medium&utm_medium=referral&utm_campaign=WritewithFauna_BuildServerlessWebshopWorkshop_part2_Raymon) database serverless functions in Netlify and show it in our Angular application. If you didn’t follow the previous tutorial in this series, please check that out first, this will make following this tutorial much easier. Let’s get our hands dirty! _Happy coding! 🚀_ ### 1\. Clean up Let’s clean the app.component.html so that we have a blank canvas to work with. See it in the [Github repository](https://github.com/DevByRayRay/ng-faunadb-netlify-serverless-functions/blob/clean-application/src/app/app.component.html). And the `app.component.scss` file needs some basic styling from the `app.component.html`. The styling is nothing special, basically copied and cleaned from what was already there. See it in the [Github repository](https://github.com/DevByRayRay/ng-faunadb-netlify-serverless-functions/blob/clean-application/src/app/app.component.scss). ### 2\. Show product list data Thanks to the function that refilled the data of the [FaunaDB](https://dashboard.fauna.com/accounts/register?utm_source=Medium&utm_medium=referral&utm_campaign=WritewithFauna_BuildServerlessWebshopWorkshop_part2_Raymon) database we already have some data to visualize our list of products. ### Product model To get the most out of TypeScript, we have to make a product model that is the same as we get back from the FaunaDB API. ng generate class products\_models\_product This will generate a class for us in which we can define the data structure. (Yes we could make an interface, but for now, I keep it simple). ### Environment To make sure we can call our serverless function locally and on our staging environment, we have to use the Angular environment file. Make sure you import the environment file in every service which calls the API. In the `environments/environment.ts` we set a property `apiUrl` with a value to the local API. In the `environments/environment.prod.ts` we set the value of `apiUrl` to the URL of our Netlify environment. In our `package.json` we have to add another command `npm run build:prod` to create a production build. "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "build:prod": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "fn:serve": "netlify-lambda serve functions", "fn:build": "netlify-lambda build functions" }, In the Netlify settings, you can configure that command to be used. ### Product Service Now we can create a service that we can call from our component. This endpoint is going to retrieve the product data from the database. ng generate service products\_service\_product This command creates the following directory `src/app/products/service` with a `product.service.ts` file in there. Add a method for getting all the products from our serverless function. We created the products function in the previous post. If you miss that, check it out before you continue. Create a component to call the `ProductService` from there. Run the following command to have it created for you. ### Product List Component ng generate component products\_components\_product-list This is how we are going to call our `getProducts` method from the `ProductService` in the `ProductListComponent`. In the `ngOnInit` I call the service and add additional images for the products. (Normally you would have added that to the database.) ### Routing To make sure that everything we show in the `product-list.component.html` will be shown on our home view, we have to configure the `app-routing.module.ts`. ### Show Product Data Let’s put a pre tag in our `product-list.component.ts` to show how the product data from the API. 

{{ products | json }}
### 3\. Visualize the products We are receiving all our products from the database. If this would be a webshop for a client to build you might want to consider pagination. But in this tutorial, I leave that up to you. Since we get an `Array` of `Objects` from our endpoint, we simply loop through it with the `*ngFor` on an `ng-container` element. For every product, there will be a section with a class `product__item` in the HTML to show the product information. I have added some additional styling to make it a bit nicer. The webshop looks now something like this. Feel free to play around with the styling yourself. See it in the [Github repository](https://github.com/DevByRayRay/ng-faunadb-netlify-serverless-functions/tree/create-product-detail-page/src/app/products/components/product-list). The live version of the webshop can [be found on Netlify](https://5ef8fb6088e4b7be14e4ec73--ng-serverless-faunadb.netlify.app%26sa%3Dd%26ust%3D1596037517505000%26usg%3Daovvaw1of3njm4wpjxhaf7ov7vn5/). ### 4\. Show product detail To visit every product detail page we need to create a `product-item` component and define a route in our `app.routes.ts`. ### Product item component Run the command below to create the product-item component in the correct directory. ng generate component products/components/product-item Open the `app.routes.ts` to add the new route. We define a new route for `product/:id`. The `:id` will become our product ID which we get back from the Fauna API. In our product-item component we can hook into the router and get that Id. This ID will be used in our service to call our serverless function. ### Product By Id Function Open the `lib/product-service.js` to add another method `getProductById` for getting a product by id. Now create a file `product-by-id.js` in the `functions` folder. In the function, we first check if we have a product ID in the URL. The call we would do will look like this [http://localhost:9000/.netlify/functions/product-by-id/266790280843231752](http://localhost:9000/.netlify/functions/product-by-id/266790280843231752). So the last string after the latest / will be our product ID. Before you commit this, I highly recommend testing this locally first. ### Call API on Product Item Let’s add a method to our `product.service.ts` for getting the information in our product-item component. Now call the `getProductById` method from the service in our component. As you can see we import the `ActivateRoute` to get access to the id parameter in the URL. We do that in the `ngOnInit` so this will be executed immediately after the component is ready. We store the product ID in `this.id` and use it to call the `getProductById` method. When we receive the data from the serverless function, we store it in the productItem property. Now we can show the information about the product via the `product-item.component.html`. To make it nicer for the user to see in the browser I’ve created a simple layout that comes from the `product-list.component.scss`. The result looks like this. See it in the [Github repository](https://github.com/DevByRayRay/ng-faunadb-netlify-serverless-functions/tree/create-product-detail-page/src/app/products/components/product-list). The live version of the webshop can [be found on Netlify](https://5ef8fb6088e4b7be14e4ec73--ng-serverless-faunadb.netlify.app%26sa%3Dd%26ust%3D1596037517532000%26usg%3Daovvaw0twzbmdbxyw6nybruij0eu/). ### Conclusion As you can see with the ease of using [FaunaDB](https://dashboard.fauna.com/accounts/register?utm_source=Medium&utm_medium=referral&utm_campaign=WritewithFauna_BuildServerlessWebshopWorkshop_part2_Raymon) and serverless functions you can easily build a serious webshop. Everything you do is Frontend development that’s what I think is making it so cool. The API of [FaunaDB](https://dashboard.fauna.com/accounts/register?utm_source=Medium&utm_medium=referral&utm_campaign=WritewithFauna_BuildServerlessWebshopWorkshop_part2_Raymon) is super easy and flexible to get our product list and detail. Let me know in the comments what you think of it. Next time we are gonna focus on the CRUD views to manage our products. If you can’t wait for that, start experimenting with what we already build in this tutorial. _Happy Coding 🚀_ > I’ve gathered a couple of [aspiring developers around the world on a Discord server](https://mailchi.mp/fb82491d03f8/dev-by-rayray-discord-community), feel free if you like to join in. ### Read more [**4 Steps to Get Started With Serverless Functions on Netlify** _The most powerful tool for front-end developers_medium.com](https://medium.com/better-programming/4-steps-to-get-started-with-serverless-functions-on-netlify-a6942bf071ca "https://medium.com/better-programming/4-steps-to-get-started-with-serverless-functions-on-netlify-a6942bf071ca")[](https://medium.com/better-programming/4-steps-to-get-started-with-serverless-functions-on-netlify-a6942bf071ca) [**5 Steps Give Structure To Your Development Projects** _Are you not able to manage your programming projects? Try this!_medium.com](https://medium.com/dev-together/5-steps-give-structure-to-your-development-projects-e1348eb9f17d "https://medium.com/dev-together/5-steps-give-structure-to-your-development-projects-e1348eb9f17d")[](https://medium.com/dev-together/5-steps-give-structure-to-your-development-projects-e1348eb9f17d) [**How To Build A Dark Mode Switcher with CSS Variables** _Build a Dark Mode Switcher with CSS Variable, JavaScript and TypeScript_levelup.gitconnected.com](https://levelup.gitconnected.com/how-to-build-a-dark-mode-switcher-with-css-variables-ccb13f7441a0 "https://levelup.gitconnected.com/how-to-build-a-dark-mode-switcher-with-css-variables-ccb13f7441a0")[](https://levelup.gitconnected.com/how-to-build-a-dark-mode-switcher-with-css-variables-ccb13f7441a0)