# Managing data This guide builds on the second step of the [Getting started with a basic Angular application](start) tutorial, [Adding navigation](start/start-routing "Adding navigation"). At this stage of development, the store application has a product catalog with two views: a product list and product details. Users can click on a product name from the list to see details in a new view, with a distinct URL, or route. This step of the tutorial guides you through creating a shopping cart in the following phases: * Update the product details view to include a **Buy** button, which adds the current product to a list of products that a cart service manages. * Add a cart component, which displays the items in the cart. * Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's `HttpClient` to retrieve shipping data from a `.json` file. {@a create-cart-service} ## Create the shopping cart service In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's [dependency injection system](guide/glossary#dependency-injection-di "Dependency injection definition"). Currently, users can view product information, and the application can simulate sharing and notifications about product changes. The next step is to build a way for users to add products to a cart. This section walks you through adding a **Buy** button and setting up a cart service to store information about products in the cart. {@a generate-cart-service} ### Define a cart service 1. To generate a cart service, right click on the `app` folder, choose **Angular Generator**, and choose **Service**. Name the new service `cart`. 1. In the `CartService` class, define an `items` property to store the array of the current products in the cart. 1. Define methods to add items to the cart, return cart items, and clear the cart items. * The `addToCart()` method appends a product to an array of `items`. * The `getItems()` method collects the items users add to the cart and returns each item with its associated quantity. * The `clearCart()` method returns an empty array of items, which empties the cart. {@a product-details-use-cart-service} ### Use the cart service This section walks you through using the `CartService` to add a product to the cart. 1. In `product-details.component.ts`, import the cart service. 1. Inject the cart service by adding it to the `constructor()`. 1. Define the `addToCart()` method, which adds the current product to the cart. The `addToCart()` method does the following: * Takes the current `product` as an argument. * Uses the `CartService` `addToCart()` method to add the product to the cart. * Displays a message that you've added a product to the cart. 1. In `product-details.component.html`, add a button with the label **Buy**, and bind the `click()` event to the `addToCart()` method. This code updates the product details template with a **Buy** button that adds the current product to the cart. 1. Verify that the new **Buy** button appears as expected by refreshing the application and clicking on a product's name to display its details.
Display details for selected product with a Buy button
1. Click the **Buy** button to add the product to the stored list of items in the cart and display a confirmation message.
Display details for selected product with a Buy button
## Create the cart view For customers to see their cart, you can create the cart view in two steps: 1. Create a cart component and configure routing to the new component. 1. Display the cart items. ### Set up the cart component To create the cart view, follow the same steps you did to create the `ProductDetailsComponent` and configure routing for the new component. 1. Generate a cart component named `cart` by right-clicking the `app` folder, choosing **Angular Generator**, and **Component**. StackBlitz also generates an `ngOnInit()` by default in components. You can ignore the `CartComponent` `ngOnInit()` for this tutorial. 1. Open `app.module.ts` and add a route for the component `CartComponent`, with a `path` of `cart`. 1. Update the **Checkout** button so that it routes to the `/cart` URL. In `top-bar.component.html`, add a `routerLink` directive pointing to `/cart`. 1. Verify the new `CartComponent` works as expected by clicking the **Checkout** button. You can see the "cart works!" default text, and the URL has the pattern `https://getting-started.stackblitz.io/cart`, where `getting-started.stackblitz.io` may be different for your StackBlitz project.
Display cart view before customizing
### Display the cart items This section shows you how to use the cart service to display the products in the cart. 1. In `cart.component.ts`, import the `CartService` from the `cart.service.ts` file. 1. Inject the `CartService` so that the `CartComponent` can use it by adding it to the `constructor()`. 1. Define the `items` property to store the products in the cart. This code sets the items using the `CartService` `getItems()` method. You defined this method [when you created `cart.service.ts`](#generate-cart-service). 1. Update the cart template with a header, and use a `
` with an `*ngFor` to display each of the cart items with its name and price. The resulting `CartComponent` template is as follows. 1. Verify that your cart works as expected: * Click **My Store** * Click on a product name to display its details. * Click **Buy** to add the product to the cart. * Click **Checkout** to see the cart.
Cart view with products added
For more information about services, see [Introduction to Services and Dependency Injection](guide/architecture-services "Concepts > Intro to Services and DI"). ## Retrieve shipping prices Servers often return data in the form of a stream. Streams are useful because they make it easy to transform the returned data and make modifications to the way you request that data. Angular `HttpClient` is a built-in way to fetch data from external APIs and provide them to your application as a stream. This section shows you how to use `HttpClient` to retrieve shipping prices from an external file. The application that StackBlitz generates for this guide comes with predefined shipping data in `assets/shipping.json`. Use this data to add shipping prices for items in the cart. ### Configure `AppModule` to use `HttpClient` To use Angular's `HttpClient`, you must configure your application to use `HttpClientModule`. Angular's `HttpClientModule` registers the providers your application needs to use the `HttpClient` service throughout your application. 1. In `app.module.ts`, import `HttpClientModule` from the `@angular/common/http` package at the top of the file with the other imports. As there are a number of other imports, this code snippet omits them for brevity. Be sure to leave the existing imports in place. 1. To register Angular's `HttpClient` providers globally, add `HttpClientModule` to the `AppModule` `@NgModule()` `imports` array. ### Configure `CartService` to use `HttpClient` The next step is to inject the `HttpClient` service into your service so your application can fetch data and interact with external APIs and resources. 1. In `cart.service.ts`, import `HttpClient` from the `@angular/common/http` package. 1. Inject `HttpClient` into the `CartService` `constructor()`. ### Configure `CartService` to get shipping prices To get shipping data, from `shipping.json`, You can use the `HttpClient` `get()` method. 1. In `cart.service.ts`, below the `clearCart()` method, define a new `getShippingPrices()` method that uses the `HttpClient` `get()` method. For more information about Angular's `HttpClient`, see the [Client-Server Interaction](guide/http "Server interaction through HTTP") guide. ## Create a shipping component Now that you've configured your application to retrieve shipping data, you can create a place to render that data. 1. Generate a new component named `shipping` by right-clicking the `app` folder, choosing **Angular Generator**, and selecting **Component**. 1. In `app.module.ts`, add a route for shipping. Specify a `path` of `shipping` and a component of `ShippingComponent`. There's no link to the new shipping component yet, but you can see its template in the preview pane by entering the URL its route specifies. The URL has the pattern: `https://getting-started.stackblitz.io/shipping` where the `getting-started.stackblitz.io` part may be different for your StackBlitz project. ### Configuring the `ShippingComponent` to use `CartService` This section guides you through modifying the `ShippingComponent` to retrieve shipping data via HTTP from the `shipping.json` file. 1. In `shipping.component.ts`, import `CartService`. 1. Inject the cart service in the `ShippingComponent` `constructor()`. 1. Define a `shippingCosts` property that sets the `shippingCosts` property using the `getShippingPrices()` method from the `CartService`. 1. Update the `ShippingComponent` template to display the shipping types and prices using the `async` pipe. The `async` pipe returns the latest value from a stream of data and continues to do so for the life of a given component. When Angular destroys that component, the `async` pipe automatically stops. For detailed information about the `async` pipe, see the [AsyncPipe API documentation](/api/common/AsyncPipe). 1. Add a link from the `CartComponent` view to the `ShippingComponent` view. 1. Click the **Checkout** button to see the updated cart. Remember that changing the application causes the preview to refresh, which empties the cart.
Cart with link to shipping prices
Click on the link to navigate to the shipping prices.
Display shipping prices
## What's next You now have a store application with a product catalog, a shopping cart, and you can look up shipping prices. To continue exploring Angular: * Continue to [Forms for User Input](start/start-forms "Forms for User Input") to finish the application by adding the shopping cart view and a checkout form. * Skip ahead to [Deployment](start/start-deployment "Deployment") to move to local development, or deploy your application to Firebase or your own server.