For a fuller introduction to Angular's template syntax, see [Introduction to components and templates](guide/architecture-components#template-syntax "Template Syntax").
+Para una introducción más completa a la sintaxis de la plantilla de Angular, ve a [Introducción a componentes y plantillas](guide/architecture-components#template-syntax "Sintaxis de plantilla").
+
{@a components}
## Components
-*Components* define areas of responsibility in the user interface, or UI,
-that let you reuse sets of UI functionality.
-You've already built one with the product list component.
+Los *Componentes* definen áreas de responsabilidad en la interfaz de usuario, o UI,
+que le permiten reutilizar conjuntos de funciones de la interfaz de usuario.
+Ya haz creado uno con el componente de la lista de productos.
-A component consists of three things:
-* **A component class** that handles data and functionality. In the previous section, the product data and the `share()` method in the component class handle data and functionality, respectively.
-* **An HTML template** that determines the UI. In the previous section, the product list's HTML template displays the name, description, and a "Share" button for each product.
-* **Component-specific styles** that define the look and feel.
-Though product list does not define any styles, this is where component CSS
-resides.
+Un componente consta de tres cosas:
+* **Una clase de componente** que maneja datos y funcionalidad. En la sección anterior, los datos del producto y el método `share()` en la clase de componente manejan datos y funcionalidad, respectivamente.
+* **Una plantilla HTML** que determina la interfaz de usuario. En la sección anterior, la plantilla HTML de la lista de productos muestra el nombre, la descripción y un botón "Compartir" para cada producto.
+* **Estilos de componentes específicos** que definen la apariencia.
+Aunque la lista de productos no define ningún estilo, aquí es donde el CSS del componente
+reside.
-An Angular application comprises a tree of components, in which each Angular component has a specific purpose and responsibility.
+Una aplicación Angular comprende un árbol de componentes, en el que cada componente de Angular tiene un propósito y una responsabilidad específicos.
-Currently, the example app has three components:
+Actualmente, la aplicación de ejemplo tiene tres componentes:
-For more information about components and how they interact with templates, see [Introduction to Components](guide/architecture-components "Concepts > Introduction to Components and Templates").
+Para más información sobre componentes y cómo interactúan con las plantillas, visita[Introducción a componentes y plantillas](guide/architecture-components "Conceptos > Introducción a componentes y plantillas").
{@a input}
-## Input
+## Entrada/Input
-Currently, the product list displays the name and description of each product.
-The product list component also defines a `products` property that contains imported data for each product from the `products` array in `products.ts`.
+Actualmente, la lista de productos muestra el nombre y la descripción de cada producto.
+El componente de lista de productos también define una propiedad de `productos` que contiene datos importados para cada producto del array `productos` en `productos.ts`.
-The next step is to create a new alert feature that takes a product as an input. The alert checks the product's price, and, if the price is greater than $700, displays a "Notify Me" button that lets users sign up for notifications when the product goes on sale.
+El siguiente paso es crear una nueva función de alerta que tome un producto como entrada. La alerta verifica el precio del producto y, si el precio es superior a $700, muestra un botón "Notificarme" que permite a los usuarios registrarse para recibir notificaciones cuando el producto sale a la venta.
-1. Create a new product alerts component.
+1. Crear un nuevo componente de alertas de producto
- 1. Right click on the `app` folder and use the `Angular Generator` to generate a new component named `product-alerts`.
+ 1. Haz clic derecho en la carpeta `app` y usa el `Angular Generator` para generar un nuevo componente llamado `product-alerts`.

@@ -288,51 +286,52 @@ The new product alert component takes a product as input from the product list.
-See [Component Interaction](guide/component-interaction "Components & Templates > Component Interaction") for more information about passing data from a parent to child component, intercepting and acting upon a value from the parent, and detecting and acting on changes to input property values.
+Visita [Interacción de componentes](guide/component-interaction "Componentes y plantillas> Interacción de componentes") para obtener más información sobre cómo pasar datos de un componente principal a secundario, interceptar y actuar sobre un valor del elemento principal y detectar y actuar sobre los cambios en valores de propiedad de entrada.
{@a output}
-## Output
+## Salida/Output
-To make the "Notify Me" button work, you need to configure two things:
+Para que el botón "Notificarme" funcione, debes configurar dos cosas:
- the product alert component to emit an event when the user clicks "Notify Me"
- the product list component to act on that event
-1. Open `product-alerts.component.ts`.
+1. Abre `product-alerts.component.ts`.
-1. Import `Output` and `EventEmitter` from `@angular/core`:
+1. Importa `Output` y `EventEmitter` desde `@angular/core`:
-1. In the component class, define a property named `notify` with an `@Output()` decorator and an instance of `EventEmitter()`. This allows the product alert component to emit an event when the value of the notify property changes.
+1. En la clase de componente, define una propiedad llamada `notificar` con un decorador `@Output()` y una instancia de `EventEmitter()`. Esto permite que el componente alerta de producto emita un evento cuando cambie el valor de la propiedad de notificación.
- When the Angular CLI generates a new component, it includes an empty constructor, the `OnInit` interface, and the `ngOnInit()` method.
- Since the following example isn't using them, they are omitted here for brevity.
+ Cuando Angular CLI genera un nuevo componente, incluye un constructor vacío, la interfaz `OnInit` y el método `ngOnInit()`.
+ Dado que el siguiente ejemplo no los usa, se omiten por el momento.
-1. In the product alert template, `product-alerts.component.html`, update the "Notify Me" button with an event binding to call the `notify.emit()` method.
+1. En la plantilla de alerta de producto, `product-alerts.component.html`, actualiza el botón "Notificarme" con una vinculación de eventos para llamar al método `notify.emit()`.
-1. Next, define the behavior that should happen when the user clicks the button. Recall that it's the parent, product list component—not the product alerts component—that acts when the child raises the event. In `product-list.component.ts`, define an `onNotify()` method, similar to the `share()` method:
+
+1. A continuación, define el comportamiento que debería ocurrir cuando el usuario hace clic en el botón. Recuerda que es el componente padre, lista de productos—no el componente de alertas de productos—el que actúa cuando el hijo genera el evento. En `product-list.component.ts`, defina un método `onNotify()`, similar al método `share()`:
-1. Finally, update the product list component to receive output from the product alerts component.
+1. Por último, actualiza el componente de lista de productos para recibir resultados del componente de alertas de productos.
- In `product-list.component.html`, bind the `app-product-alerts` component (which is what displays the "Notify Me" button) to the `onNotify()` method of the product list component.
+ En `product-list.component.html`, vincula el componente `app-product-alerts` (que es lo que muestra el botón "Notificarme") al método `onNotify()` del componente de lista de productos.
-1. Try the "Notify Me" button:
+1. Prueba el botón "Notificarme":

@@ -341,20 +340,22 @@ To make the "Notify Me" button work, you need to configure two things:
-See [Component Interaction](guide/component-interaction "Components & Templates > Component Interaction") for more information about listening for events from child components, reading child properties or invoking child methods, and using a service for bi-directional communication between components.
+
+Visita [Interacción de componentes](guide/component-interaction "Componentes y plantillas> Interacción de componentes") para obtener más información sobre cómo escuchar eventos de componentes hijos, leer propiedades hijas o invocar métodos hijos y utilizar un servicio para la comunicación bidireccional entre componentes.
{@a next-steps}
-## Next steps
+## Próximos pasos
-Congratulations! You've completed your first Angular app!
+¡Felicidades! ¡Has completado tu primera aplicación Angular!
-You have a basic online store catalog with a product list, "Share" button, and "Notify Me" button.
-You've learned about the foundation of Angular: components and template syntax.
-You've also learned how the component class and template interact, and how components communicate with each other.
+Tienes un catálogo básico de la tienda en línea con una lista de productos, el botón "Compartir" y el botón "Notificarme".
+Haz aprendido sobre la base de Angular: componentes y sintaxis de plantilla.
+También haz aprendido cómo interactúan la clase de componente y la plantilla, y cómo los componentes se comunican entre sí.
-To continue exploring Angular, choose either of the following options:
+Para continuar explorando Angular, elije cualquiera de las siguientes opciones:
* [Continue to the "In-app navigation" section](start/start-routing "Try it: In-app navigation") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern.
-* [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.
+* [Continua con la sección "Navegación en la aplicación"](start/start-routing "Pruébelo: navegación en la aplicación") para crear una página de detalles del producto a la que se puede acceder haciendo clic en el nombre de un producto y que tiene su propio patron URL.
+* [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.* [Salta a la sección "Despliegue"](start/start-deployment "Pruébelo: Despliegue") para pasar al desarrollo local o desplegar su aplicación en Firebase o en tu propio servidor.
\ No newline at end of file