+
+A later part of this tutorial, [Use forms for user input](start/start-forms "Try it: Forms for user input"), guides you through accessing this cart service from the view where the user checks out.
+
+
+
+{@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`.
+
+ ` with an `*ngFor` to display each of the cart items with its name and price.
+
+ The resulting `CartComponent` template is as follows:
+
+
+
+
+1. Test your cart component.
+
+ 1. Click on "My Store" to go to the product list view.
+ 1. Click on a product name to display its details.
+ 1. Click "Buy" to add the product to the cart.
+ 1. Click "Checkout" to see the cart.
+ 1. To add another product, click "My Store" to return to the product list.
+
+ Repeat to add more items to the cart.
+
+
+
+
+
+
+
+
+StackBlitz tip: Any time the preview refreshes, the cart is cleared. If you make changes to the app, the page refreshes, so you'll need to buy products again to populate the cart.
+
+
+
+
+
+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.
+The Angular HTTP client, `HttpClient`, is a built-in way to fetch data from external APIs and provide them to your app as a stream.
+
+This section shows you how to use the HTTP client to retrieve shipping prices from an external file.
+
+### Predefined shipping data
+
+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.
+
+
+
+
+
+### Use `HttpClient` in the `AppModule`
+
+Before you can use Angular's HTTP client, you must configure your app to use `HttpClientModule`.
+
+Angular's `HttpClientModule` registers the providers your app needs to use a single instance of the `HttpClient` service throughout your app.
+
+1. Open `app.module.ts`.
+
+ This file contains imports and functionality that is available to the entire app.
+
+1. 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. Add `HttpClientModule` to the `AppModule` `@NgModule()` `imports` array to register Angular's `HttpClient` providers globally.
+
+
+
+
+### Use `HttpClient` in the cart service
+
+Now that the `AppModule` imports the `HttpClientModule`, the next step is to inject the `HttpClient` service into your service so your app can fetch data and interact with external APIs and resources.
+
+
+1. Open `cart.service.ts`.
+
+1. Import `HttpClient` from the `@angular/common/http` package.
+
+
+
+
+1. Inject `HttpClient` into the `CartService` constructor:
+
+
+
+
+
+### Define the `get()` method
+
+Multiple components can leverage the same service.
+Later in this tutorial, the shipping component uses the cart service to retrieve shipping data via HTTP from the `shipping.json` file.
+First, define a `get()` method.
+
+1. Continue working in `cart.service.ts`.
+
+1. Below the `clearCart()` method, define a new `getShippingPrices()` method that uses the `HttpClient` `get()` method to retrieve the shipping data.
+
+
+
+
+
+
+For more information about Angular's `HttpClient`, see the [Client-Server Interaction](guide/http "Server interaction through HTTP") guide.
+
+
+
+## Define the shipping view
+
+Now that your app can retrieve shipping data, create a shipping component and template.
+
+1. Generate a new component named `shipping`.
+
+ Reminder: In the file list, right-click the `app` folder, choose `Angular Generator` and `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.
+
+1. Modify the shipping component so that it uses the cart service to retrieve shipping data via HTTP from the `shipping.json` file.
+
+ 1. Import the cart service.
+
+
+
+ 1. Define a `shippingCosts` property.
+
+
+
+ 1. Inject the cart service in the `ShippingComponent` constructor:
+
+
+
+ 1. Set the `shippingCosts` property using the `getShippingPrices()` method from the cart service.
+
+
+
+1. Update the shipping component's 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 cart view to the shipping view:
+
+
+
+1. Test your shipping prices feature:
+
+ Click the "Checkout" button to see the updated cart. Remember that changing the app causes the preview to refresh, which empties the cart.
+
+
+
+
+
+ Click on the link to navigate to the shipping prices.
+
+
+
+
+
+
+## Next steps
+
+Congratulations! You have an online store application with a product catalog and shopping cart. You can also look up and display shipping prices.
+
+To continue exploring Angular, choose either of the following options:
+* [Continue to the "Forms" section](start/start-forms "Try it: Forms for User Input") to finish the app by adding the shopping cart view and a checkout form.
+* [Skip ahead to the "Deployment" section](start/start-deployment "Try it: Deployment") to move to local development, or deploy your app to Firebase or your own server.
diff --git a/aio/content/start/start-data.md b/aio/content/start/start-data.md
index 3a5a3cf196436e..2d7eb01a8ea166 100644
--- a/aio/content/start/start-data.md
+++ b/aio/content/start/start-data.md
@@ -1,81 +1,81 @@
-# Try it: Manage data
+# Manejo de datos
-At the end of [In-app Navigation](start/start-routing "Try it: In-app Navigation"), the online 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.
+Al final de [Navegación en la aplicación](start/start-routing "Navegación en la aplicación"), la aplicación de tienda en linea tiene un catalogo con dos vistas: una lista de producto y detalles del producto.
+Los usuarios pueden hacer clic en el nombre de un producto de la lista para ver los detalles en una nueva vista, con una URL o ruta distinta.
-This page guides you through creating the shopping cart in three phases:
+Esta pagina te guiará a través de la creación del carrito de compras en tres fases:
-* 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.
+* Actualice la vista de detalles del producto para incluir un botón de "Comprar", el cual agrega el producto actual a una lista de productos que administra un servicio de carrito.
+* Agregue un componente cart, que muestra los artículos en el carrito.
+* Agregue un componente de envío, el cual recupera los precios de envío de los artículos en el carrito mediante el uso del `HttpClient` de Angular para recuperar los datos de envío de un archivo `.json`.
{@a services}
-## Services
+## Servicios
-Services are an integral part of Angular applications. 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 "Dependency injection definition").
+Los servicios son una parte integral de las aplicaciones de Angular. En Angular, un servicio es una instancia de una clase que se puede poner a disposición de cualquier parte de su aplicación usando el [sistema de inyección de dependencias](guide/glossary#dependency-injection "Definición de inyección de dependencias") de Angular.
-Services are the place where you share data between parts of your application. For the online store, the cart service is where you store your cart data and methods.
+Los servicios son el lugar donde se comparten datos entre las partes de su aplicación. Para la tienda en línea, el servicio de carrito es donde se almacenan los datos y métodos de su carrito.
{@a create-cart-service}
-## Create the shopping cart service
+## Crear el servicio de carrito de compras
-Up to this point, users can view product information, and
-simulate sharing and being notified about product changes.
-They cannot, however, buy products.
+Hasta este punto, los usuarios pueden ver la información del producto y
+simular compartir y recibir notificaciones sobre cambios de productos.
+Sin embargo, no pueden comprar productos.
-In this section, you add a "Buy" button to the product
-details view and set up a cart service to store information
-about products in the cart.
+En esta sección, agregue un botón "Comprar" a la vista de los detalles del producto
+y configure un servicio de carrito para almacenar la información
+de los productos en el carrito.
-A later part of this tutorial, [Use forms for user input](start/start-forms "Try it: Forms for user input"), guides you through accessing this cart service from the view where the user checks out.
+En una parte posterior de este tutorial, [Usar formularios para la entrada del usuario](start/start-forms "Formularios para la entrada del usuario"), lo guiará a través del acceso a este servicio de carrito desde la vista donde el usuario realiza el pago.
{@a generate-cart-service}
-### Define a cart service
+### Definir un servicio de carrito
-1. To generate a cart service, right click on the `app` folder, choose `Angular Generator`, and choose `Service`. Name the new service `cart`.
+1. Para generar un servicio de carrito, haga clic con el botón derecho en la carpeta `app`, elija `Angular Generator` y elija `Service`. Nombre el nuevo servicio `cart`.
Intro to Services and DI").
+ El generador StackBlitz podría proporcionar el servicio de carrito en `app.module.ts` de forma predeterminada. Eso difiere del ejemplo, el cual usa una técnica de optimización de paquetes, un decorador `@Injectable()` con la declaración `{ provideIn: 'root' }`.
+ Para obtener más información sobre los servicios, consulte [Introducción a los servicios y la inyección de dependencia](guide/architecture-services "Conceptos > Introducción a los servicios y ID".
-1. In the `CartService` class, define an `items` property to store the array of the current products in the cart.
+1. En la clase `CartService`, defina una propiedad de `items` para almacenar el array de los productos actuales en el carrito.
-1. Define methods to add items to the cart, return cart items, and clear the cart items:
+1. Defina métodos para agregar artículos al carrito, retorne los artículos del carrito y borre los artículos del carrito.
- * The `addToCart()` method appends a product to an array of `items`.
+ * El método `addToCart()` agrega un producto a un array de `items`.
- * The `getItems()` method collects the items users add to the cart and returns each item with its associated quantity.
+ * El método `getItems()` recolecta los artículos que los usuarios agregan al carrito y retorna cada artículo con su cantidad asociada.
- * The `clearCart()` method returns an empty array of items.
+ * El método `clearCart()` retorna un array vacío de elementos.
{@a product-details-use-cart-service}
-### Use the cart service
+### Utilice el servicio de carrito
-This section walks you through using the cart service to add a product to the cart with a "Buy" button.
+Esta sección lo guía a través del uso del servicio de carrito para agregar un producto al carrito con un botón "Comprar".
-1. Open `product-details.component.ts`.
+1. Abra `product-details.component.ts`.
-1. Configure the component to use the cart service.
+1. Configure el componente para utilizar el servicio de carrito.
- 1. Import the cart service.
+ 1. Importe el servicio de carrito.
- 1. Inject the cart service by adding it to the `constructor()`.
+ 1. Inyecte el servicio de carrito agregándolo al `constructor()`.
@@ -84,20 +84,20 @@ This section walks you through using the cart service to add a product to the ca
To do: Consider defining "inject" and describing the concept of "dependency injection"
-->
-1. Define the `addToCart()` method, which adds the current product to the cart.
+1. Defina el método `addToCart()`, que agrega el producto actual al carrito.
- The `addToCart()` method does the following three things:
- * Receives the current `product`.
- * Uses the cart service's `addToCart()` method to add the product the cart.
- * Displays a message that you've added a product to the cart.
+ El método `addToCart()` hace las siguientes tres cosas:
+ * Recibe el `product` actual.
+ * Utiliza el método `addToCart()` del servicio de carrito para agregar el producto al carrito.
+ * Muestra un mensaje de que ha agregado un producto al carrito.
-1. Update the product details template with a "Buy" button that adds the current product to the cart.
+1. Actualice la plantilla de detalles del producto con un botón "Comprar" que agrega el producto actual al carrito.
- 1. Open `product-details.component.html`.
+ 1. Abra `product-details.component.html`.
- 1. Add a button with the label "Buy", and bind the `click()` event to the `addToCart()` method:
+ 1. Agregue un botón con la etiqueta "Comprar" y vincule el evento `click()` al método `addToCart()`:
@@ -106,50 +106,52 @@ This section walks you through using the cart service to add a product to the ca
The line, `
{{ product.price | currency }}
` uses the `currency` pipe to transform `product.price` from a number to a currency string. A pipe is a way you can transform data in your HTML template. For more information about Angular pipes, see [Pipes](guide/pipes "Pipes").
+ La línea, `
{{product.price | currency}}
` usa el pipe `currency` para transformar `product.price` de un número a un string de moneda. Una pipe es una forma de transformar datos en su plantilla HTML. Para obtener más información sobre las pipes en Angular, consulte [Pipes](guide/pipes "Pipes").
+
+ 
+ 
+