From be82fd53d7d76e7cf9657c7e1717f9ec9c549e22 Mon Sep 17 00:00:00 2001
From: Antonio Cardenas <antonioalx66@gmail.com>
Date: Wed, 21 Oct 2020 20:39:26 -0600
Subject: [PATCH 1/3] cambios de sintaxicos

---
 aio/content/tutorial/toh-pt2.en.md | 253 +++++++++++++++++++++++++++++
 aio/content/tutorial/toh-pt2.md    | 220 ++++++++++++-------------
 2 files changed, 355 insertions(+), 118 deletions(-)
 create mode 100644 aio/content/tutorial/toh-pt2.en.md

diff --git a/aio/content/tutorial/toh-pt2.en.md b/aio/content/tutorial/toh-pt2.en.md
new file mode 100644
index 0000000000000..ce094dac3f499
--- /dev/null
+++ b/aio/content/tutorial/toh-pt2.en.md
@@ -0,0 +1,253 @@
+# Display a selection list
+
+In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
+allow users to select a hero and display the hero's details.
+
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
+
+
+## Create mock heroes
+
+You'll need some heroes to display.
+
+Eventually you'll get them from a remote data server.
+For now, you'll create some _mock heroes_ and pretend they came from the server.
+
+Create a file called `mock-heroes.ts` in the `src/app/` folder.
+Define a `HEROES` constant as an array of ten heroes and export it.
+The file should look like this.
+
+<code-example path="toh-pt2/src/app/mock-heroes.ts" header="src/app/mock-heroes.ts"></code-example>
+
+## Displaying heroes
+
+Open the `HeroesComponent` class file and import the mock `HEROES`.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" header="src/app/heroes/heroes.component.ts (import HEROES)">
+</code-example>
+
+In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="component">
+</code-example>
+
+### List heroes with `*ngFor`
+
+Open the `HeroesComponent` template file and make the following changes:
+
+* Add an `<h2>` at the top,
+* Below it add an HTML unordered list (`<ul>`)
+* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
+* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
+
+Make it look like this:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" header="heroes.component.html (heroes template)"></code-example>
+
+That shows one hero. To list them all, add an `*ngFor` to the `<li>` to iterate through the list of heroes:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
+</code-example>
+
+The [`*ngFor`](guide/built-in-directives#ngFor) is Angular's _repeater_ directive.
+It repeats the host element for each element in a list.
+
+The syntax in this example is as follows:
+
+* `<li>` is the host element.
+* `heroes` holds the mock heroes list from the `HeroesComponent` class, the mock heroes list.
+* `hero` holds the current hero object for each iteration through the list.
+
+<div class="alert is-important">
+
+Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax.
+
+</div>
+
+After the browser refreshes, the list of heroes appears.
+
+{@a styles}
+
+### Style the heroes
+
+The heroes list should be attractive and should respond visually when users
+hover over and select a hero from the list.
+
+In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
+That stylesheet didn't include styles for this list of heroes.
+
+You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
+
+You may prefer instead to define private styles for a specific component and keep everything a component needs&mdash; the code, the HTML,
+and the CSS &mdash;together in one place.
+
+This approach makes it easier to re-use the component somewhere else
+and deliver the component's intended appearance even if the global styles are different.
+
+You define private styles either inline in the `@Component.styles` array or
+as stylesheet file(s) identified in the `@Component.styleUrls` array.
+
+When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent`
+and pointed to it in `@Component.styleUrls` like this.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata"
+ header="src/app/heroes/heroes.component.ts (@Component)">
+</code-example>
+
+Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`.
+You'll find them in the [final code review](#final-code-review) at the bottom of this guide.
+
+<div class="alert is-important">
+
+Styles and stylesheets identified in `@Component` metadata are scoped to that specific component.
+The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component.
+
+</div>
+
+## Master/Detail
+
+When the user clicks a hero in the **master** list,
+the component should display the selected hero's **details** at the bottom of the page.
+
+In this section, you'll listen for the hero item click event
+and update the hero detail.
+
+### Add a click event binding
+
+Add a click event binding to the `<li>` like this:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example>
+
+This is an example of Angular's [event binding](guide/event-binding) syntax.
+
+The parentheses around `click` tell Angular to listen for the `<li>` element's  `click` event.
+When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
+
+
+In the next section, define an `onSelect()` method in `HeroesComponent` to
+display the hero that was defined in the `*ngFor` expression.
+
+
+### Add the click event handler
+
+Rename the component's `hero` property to `selectedHero` but don't assign it.
+There is no _selected hero_ when the application starts.
+
+Add the following `onSelect()` method, which assigns the clicked hero from the template
+to the component's `selectedHero`.
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" header="src/app/heroes/heroes.component.ts (onSelect)"></code-example>
+
+### Add a details section
+
+Currently, you have a list in the component template. To click on a hero on the list
+and reveal details about that hero, you need a section for the details to render in the
+template. Add the following to `heroes.component.html` beneath the list section:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)"></code-example>
+
+After the browser refreshes, the application is broken.
+
+Open the browser developer tools and look in the console for an error message like this:
+
+<code-example language="sh" class="code-shell">
+  HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
+</code-example>
+
+#### What happened?
+
+When the app starts, the `selectedHero` is `undefined` _by design_.
+
+Binding expressions in the template that refer to properties of `selectedHero`&mdash;expressions like `{{selectedHero.name}}`&mdash;_must fail_ because there is no selected hero.
+
+
+#### The fix - hide empty details with _*ngIf_
+
+
+The component should only display the selected hero details if the `selectedHero` exists.
+
+Wrap the hero detail HTML in a `<div>`.
+Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
+
+
+<div class="alert is-important">
+
+Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
+
+</div>
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" header="src/app/heroes/heroes.component.html (*ngIf)"></code-example>
+
+After the browser refreshes, the list of names reappears.
+The details area is blank.
+Click a hero in the list of heroes and its details appear.
+The app seems to be working again.
+The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
+
+
+#### Why it works
+
+When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to consider.
+
+When the user picks a hero, `selectedHero` has a value and
+`ngIf` puts the hero detail into the DOM.
+
+### Style the selected hero
+
+It's difficult to identify the _selected hero_ in the list when all `<li>` elements look alike.
+
+If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
+
+<div class="lightbox">
+  <img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
+</div>
+
+That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
+You just have to apply the `.selected` class to the `<li>` when the user clicks it.
+
+The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally.
+Just add `[class.some-css-class]="some-condition"` to the element you want to style.
+
+Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example>
+
+When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class.
+
+The finished `<li>` looks like this:
+
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="li" header="heroes.component.html (list item hero)"></code-example>
+
+{@a final-code-review}
+
+## Final code review
+
+Here are the code files discussed on this page, including the `HeroesComponent` styles.
+
+<code-tabs>
+
+  <code-pane header="src/app/mock-heroes.ts" path="toh-pt2/src/app/mock-heroes.ts">
+  </code-pane>
+
+  <code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane header="src/app/heroes/heroes.component.html" path="toh-pt2/src/app/heroes/heroes.component.html">
+  </code-pane>
+
+  <code-pane header="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
+  </code-pane>
+
+</code-tabs>
+
+## Summary
+
+* The Tour of Heroes app displays a list of heroes in a Master/Detail view.
+* The user can select a hero and see that hero's details.
+* You used `*ngFor` to display a list.
+* You used `*ngIf` to conditionally include or exclude a block of HTML.
+* You can toggle a CSS style class with a `class` binding.
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
index ce094dac3f499..f1195a6467286 100644
--- a/aio/content/tutorial/toh-pt2.md
+++ b/aio/content/tutorial/toh-pt2.md
@@ -1,238 +1,223 @@
-# Display a selection list
+# Mostrar una lista de selección
 
-In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
-allow users to select a hero and display the hero's details.
+En esta página, ampliaremos la aplicación Tour de Héroes para mostrar una lista de héroes,
+Permite al usuario seleccionar un héroe y ver los detalles del héroe.
 
 <div class="alert is-helpful">
 
-  For the sample app that this page describes, see the <live-example></live-example>.
+Para ver la aplicación de ejemplo que describe esta página, consulte el  <live-example></live-example>.
 
 </div>
 
 
-## Create mock heroes
+## Crea un simulacro de héroe
 
-You'll need some heroes to display.
+Primero, necesitarás algunos héroes para mostrar.
+Eventualmente los obtendrá de un servidor de datos remoto. Por ahora, creará algunos _héroes simulados_ y pretenderá que provienen del servidor.
 
-Eventually you'll get them from a remote data server.
-For now, you'll create some _mock heroes_ and pretend they came from the server.
-
-Create a file called `mock-heroes.ts` in the `src/app/` folder.
-Define a `HEROES` constant as an array of ten heroes and export it.
-The file should look like this.
+Cree un archivo llamado `mock-heroes.ts` en la carpeta `src/app/`.
+Defina la constante `HEROES` como un conjunto de 10 héroes y expórtela.
+El archivo se verá así:
 
 <code-example path="toh-pt2/src/app/mock-heroes.ts" header="src/app/mock-heroes.ts"></code-example>
 
-## Displaying heroes
+## Mostrar Héroe
 
-Open the `HeroesComponent` class file and import the mock `HEROES`.
+Abra el archivo de clase `HeroesComponent` e importe el mock `HEROES`.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" header="src/app/heroes/heroes.component.ts (import HEROES)">
 </code-example>
 
-In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding.
+En el mismo archivo (clase `HeroesComponent`), defina una propiedad de componente llamada `heroes` para exponer el array HEROES para la vinculación.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="component">
 </code-example>
 
-### List heroes with `*ngFor`
+### Enumerar héroes con `*ngFor`
 
-Open the `HeroesComponent` template file and make the following changes:
+Abra las Plantillas `HeroesComponent` y realice los siguientes cambios:
 
-* Add an `<h2>` at the top,
-* Below it add an HTML unordered list (`<ul>`)
-* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
-* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
+* Agregue `<h2>` al principio
+* Agregue una lista HTML desordenada (`<ul>`) debajo de ella
+* Inserte `<li>` dentro del `<ul>` que muestra la propiedad `hero`
+* Espolvorea algunas clases CSS al estilo (agregaremos estilos CSS en breve)
 
-Make it look like this:
+Se parece a esto:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" header="heroes.component.html (heroes template)"></code-example>
 
-That shows one hero. To list them all, add an `*ngFor` to the `<li>` to iterate through the list of heroes:
+Esto muestra un héroe. Para enumerarlos a todos, agregue `*ngFor*` a `<li>` para iterar sobre la lista de héroes.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
 </code-example>
 
-The [`*ngFor`](guide/built-in-directives#ngFor) is Angular's _repeater_ directive.
-It repeats the host element for each element in a list.
+[`*ngFor`](guide/template-syntax#ngFor) es la directiva de _repetición_ de Angular.
+
+Esto repite el elemento host para cada elemento de la lista.
 
-The syntax in this example is as follows:
+La sintaxis para este ejemplo es:
 
-* `<li>` is the host element.
-* `heroes` holds the mock heroes list from the `HeroesComponent` class, the mock heroes list.
-* `hero` holds the current hero object for each iteration through the list.
+* `<li>` es un elemento host
+* `heroes` es una lista de clases `HeroesComponent` que contiene la lista de héroes simulados
+* `hero` contiene el objeto héroe actual en una lista para cada ciclo
 
 <div class="alert is-important">
 
-Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax.
+No olvide el asterisco (*) antes del `ngFor`. Esta es una parte importante de la sintaxis.
 
 </div>
 
-After the browser refreshes, the list of heroes appears.
+Actualiza tu navegador para ver la lista de héroes.
 
 {@a styles}
 
-### Style the heroes
+### Agregar estilo a los héroes
+
+La lista de héroes debe ser atractiva y visualmente prominente cuando el usuario coloca el cursor y selecciona un héroe de la lista.
 
-The heroes list should be attractive and should respond visually when users
-hover over and select a hero from the list.
+En [Primer tutorial](tutorial/toh-pt0#app-wide-styles), configuro el estilo básico de toda la aplicación en `styles.css`.
 
-In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
-That stylesheet didn't include styles for this list of heroes.
+No incluí el estilo de la lista de héroes en esta hoja de estilo.
 
-You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
+Puede agregar más estilos a `styles.css` y seguir expandiendo esa hoja de estilo a medida que agrega componentes
 
-You may prefer instead to define private styles for a specific component and keep everything a component needs&mdash; the code, the HTML,
-and the CSS &mdash;together in one place.
+Es posible que prefiera definir un estilo privado para un componente en particular y mantener todo lo que el componente necesita &mdash;
+código, HTML, CSS&mdash; en un solo lugar.
 
-This approach makes it easier to re-use the component somewhere else
-and deliver the component's intended appearance even if the global styles are different.
+Este enfoque facilita la reutilización del componente en otro lugar y aún así proporciona al componente la apariencia deseada, incluso cuando los estilos aplicados globalmente son diferentes.
 
-You define private styles either inline in the `@Component.styles` array or
-as stylesheet file(s) identified in the `@Component.styleUrls` array.
+Los estilos privados se definen en línea dentro de la matriz `@Component.styles` o como un archivo de hoja de estilo identificado en una matriz particular `@Component.styleUrls` como un archivo de hoja de estilo.
 
-When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent`
-and pointed to it in `@Component.styleUrls` like this.
+Cuando la CLI crea un `HeroesComponent`, se crea un `heroes.component.css` vacío para el `HeroesComponent`.
+`@Component.styleUrls` se señala de esta manera.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata"
  header="src/app/heroes/heroes.component.ts (@Component)">
 </code-example>
 
-Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`.
-You'll find them in the [final code review](#final-code-review) at the bottom of this guide.
+Abra `heroes.component.css` y pegue el estilo privado para `HeroesComponent`.
+Puede encontrarlos en la [Revisión del código final](#final-code-review) al final de esta guía.
 
 <div class="alert is-important">
 
-Styles and stylesheets identified in `@Component` metadata are scoped to that specific component.
-The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component.
-
+`@Component` Los estilos y las hojas de estilo identificados en los metadatos se definen en un componente en particular.
+El estilo `heroes.component.css` solo se aplica a `HeroesComponent` y no afecta a otros HTML o HTML dentro de ningún otro componente.
 </div>
 
-## Master/Detail
+## Maestro/Detalle
 
-When the user clicks a hero in the **master** list,
-the component should display the selected hero's **details** at the bottom of the page.
+Cuando haces clic en un héroe en la lista **maestro**, el componente debe mostrar los **detalles** del héroe seleccionado en la parte inferior de la página.
 
-In this section, you'll listen for the hero item click event
-and update the hero detail.
+En este capítulo, esperemos a que se haga clic en el elemento del héroe y luego actualice los detalles del héroe.
 
-### Add a click event binding
+### Agregar enlace de evento de clic
 
-Add a click event binding to the `<li>` like this:
+Agregue el enlace de evento click a su `<li>` así:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example>
 
-This is an example of Angular's [event binding](guide/event-binding) syntax.
-
-The parentheses around `click` tell Angular to listen for the `<li>` element's  `click` event.
-When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
-
+Este es un ejemplo de la sintaxis de Angular [enlace de eventos](guide/template-syntax#event-binding) .
 
-In the next section, define an `onSelect()` method in `HeroesComponent` to
-display the hero that was defined in the `*ngFor` expression.
+Los paréntesis alrededor del `clic` le dicen a Angular que es un evento `clic` para el elemento `<li>`.
+Cuando el usuario hace clic en `<li>`, Angular ejecuta la expresión `onSelect(hero)`.
 
+En la siguiente sección, definiremos el método `onSelect()` en el `HeroesComponent` para mostrar los héroes definidos por las expresiones `*ngFor`.
 
-### Add the click event handler
+### Agregar un controlador de eventos de clic
 
-Rename the component's `hero` property to `selectedHero` but don't assign it.
-There is no _selected hero_ when the application starts.
+Cambie el nombre de la propiedad `hero` del componente a `selectedHero`, pero no la asigne todavía.
+No hay _héroe seleccionado_ cuando se inicia la aplicación.
 
-Add the following `onSelect()` method, which assigns the clicked hero from the template
-to the component's `selectedHero`.
+Agregue el método `onSelect()` de la siguiente manera y asigne el héroe en el que se hizo clic desde Plantillas al componente 'seleccionadoHero`.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" header="src/app/heroes/heroes.component.ts (onSelect)"></code-example>
 
-### Add a details section
+### Agregar una sección de detalles
 
-Currently, you have a list in the component template. To click on a hero on the list
-and reveal details about that hero, you need a section for the details to render in the
-template. Add the following to `heroes.component.html` beneath the list section:
+Actualmente, el componente Plantillas tiene una lista.
+Para hacer clic en un héroe en la lista para ver los detalles de ese héroe, necesita una sección de detalles para representarlo en Plantillas.
+Agregue lo siguiente debajo de la sección de la lista de `heroes.component.html`.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)"></code-example>
 
-After the browser refreshes, the application is broken.
+Cuando actualizo el navegador, la aplicación está rota.
 
-Open the browser developer tools and look in the console for an error message like this:
+Abra las herramientas de desarrollador de su navegador y busque un mensaje de error como este en la consola:
 
 <code-example language="sh" class="code-shell">
-  HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
+  HeroesComponent.html:3 ERROR TypeError: no se puede leer la propiedad 'nombre' de undefined
 </code-example>
 
-#### What happened?
+### ¿Que pasó?
 
-When the app starts, the `selectedHero` is `undefined` _by design_.
+Cuando inicia la aplicación, `selectedHero` es _intencionalmente_ indefinido`.
 
-Binding expressions in the template that refer to properties of `selectedHero`&mdash;expressions like `{{selectedHero.name}}`&mdash;_must fail_ because there is no selected hero.
+Los enlaces de expresión en Plantillas que se refieren a las propiedades de `selectedHero` - expresiones como` {{{selectedHero.name}} `deben _fallar_ porque el héroe seleccionado no existe, no.
 
+### Reparemos-use  _*ngIf_ para ocultar detalles vacíos
 
-#### The fix - hide empty details with _*ngIf_
-
-
-The component should only display the selected hero details if the `selectedHero` exists.
-
-Wrap the hero detail HTML in a `<div>`.
-Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
+El componente solo debe mostrar detalles para el héroe seleccionado si `selectedHero` está presente.
 
+Adjunte los detalles del héroe en HTML `<div>`.
+Agregue la directiva angular `*ngIf` a su `<div>` y configúrelo en `selectedHero`.
 
 <div class="alert is-important">
 
-Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
+No olvide el asterisco (*) antes del `ngIf`. Esta es una parte importante de la sintaxis.
 
 </div>
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" header="src/app/heroes/heroes.component.html (*ngIf)"></code-example>
 
-After the browser refreshes, the list of names reappears.
-The details area is blank.
-Click a hero in the list of heroes and its details appear.
-The app seems to be working again.
-The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
+Actualice su navegador y verá la lista de nombres nuevamente.
+El área de detalles está en blanco.
+Haga clic en un héroe en la lista de héroes para ver más detalles.
+La aplicación comenzó a funcionar nuevamente.
+Los héroes se muestran en la lista, y los detalles del héroe seleccionado se muestran en la parte inferior de la página.
 
+### Por qué esto funciona
 
-#### Why it works
+Cuando `selectedHero` no está definido, `ngIf` elimina los detalles del héroe del DOM. No hay obligación de preocuparse por `selectedHero`.
 
-When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to consider.
+Cuando el usuario selecciona un héroe, `selectedHero` tiene un valor y `ngIf` inserta los detalles del héroe en el DOM.
 
-When the user picks a hero, `selectedHero` has a value and
-`ngIf` puts the hero detail into the DOM.
+### Dar estilo a el héroe seleccionado
 
-### Style the selected hero
+Si todos los elementos `<li>` se parecen, es difícil identificar al _héroe seleccionado_ en la lista.
 
-It's difficult to identify the _selected hero_ in the list when all `<li>` elements look alike.
-
-If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
+Si el usuario hace clic en "Magneta", el héroe debe dibujarse con un color de fondo prominente como este:
 
 <div class="lightbox">
   <img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
 </div>
 
-That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
-You just have to apply the `.selected` class to the `<li>` when the user clicks it.
+El color del _héroe seleccionado_ es el trabajo de la clase CSS `.selected` en [el estilo que acaba de agregar](#styles).
+Simplemente aplica la clase `.selected` a `<li>` cuando el usuario hace clic.
 
-The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally.
-Just add `[class.some-css-class]="some-condition"` to the element you want to style.
+El [enlace de clase](guide/template-syntax#class-binding)de Angular facilita la adición y eliminación de clases CSS condicionales.
+Simplemente agregue `[class.some-css-class] =" some-condition"` al elemento que desea decorar.
 
-Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:
+Agregue el enlace `[class.selected]` al `<li>` en `HeroesComponent` Plantillas:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example>
 
-When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class.
+Si el héroe de la fila actual es el mismo que de `selectedHero`, Angular agrega una clase CSS `selected`.Cuando los dos héroes son diferentes, Angular eliminará la clase.
 
-The finished `<li>` looks like this:
+El `<li>` completado se ve así:
 
-<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="li" header="heroes.component.html (list item hero)"></code-example>
+<code-example path = "toh-pt2/src/app/heroes/heroes.component.html" region = "li" header = "heroes.component.html (elemento de lista hero)"> </code-example>
 
 {@a final-code-review}
 
-## Final code review
+## Revisión final del código
 
-Here are the code files discussed on this page, including the `HeroesComponent` styles.
+Aquí está el archivo de código en esta página que incluye el estilo `HeroesComponent`.
 
 <code-tabs>
 
   <code-pane header="src/app/mock-heroes.ts" path="toh-pt2/src/app/mock-heroes.ts">
   </code-pane>
-
+  
   <code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts">
   </code-pane>
 
@@ -241,13 +226,12 @@ Here are the code files discussed on this page, including the `HeroesComponent`
 
   <code-pane header="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
   </code-pane>
-
 </code-tabs>
 
-## Summary
+## Resumen
 
-* The Tour of Heroes app displays a list of heroes in a Master/Detail view.
-* The user can select a hero and see that hero's details.
-* You used `*ngFor` to display a list.
-* You used `*ngIf` to conditionally include or exclude a block of HTML.
-* You can toggle a CSS style class with a `class` binding.
+* La aplicación "Tour de Héroes" muestra una lista de héroes en la pantalla Maestro / Detalle
+* El usuario puede seleccionar un héroe y ver los detalles de ese héroe
+* Utilizó `*ngFor` para mostrar la lista
+* Utilizó `*ngIf` para incluir o excluir condicionalmente bloques de HTML
+* La clase de estilo CSS se puede cambiar con el enlace `class`

From 3a179d60f6687fdc513d8d15b97af7333f145144 Mon Sep 17 00:00:00 2001
From: Antonio Cardenas <antonioalx66@gmail.com>
Date: Thu, 22 Oct 2020 00:20:06 -0600
Subject: [PATCH 2/3] translate: two ways data binding

---
 aio/content/guide/two-way-binding.md |  74 ++++----
 aio/content/tutorial/toh-pt2.en.md   | 253 ---------------------------
 aio/content/tutorial/toh-pt2.md      | 220 ++++++++++++-----------
 3 files changed, 155 insertions(+), 392 deletions(-)
 delete mode 100644 aio/content/tutorial/toh-pt2.en.md

diff --git a/aio/content/guide/two-way-binding.md b/aio/content/guide/two-way-binding.md
index a824130c70fdd..ca79ead869550 100644
--- a/aio/content/guide/two-way-binding.md
+++ b/aio/content/guide/two-way-binding.md
@@ -1,76 +1,76 @@
-# Two-way binding `[(...)]`
+# Enlace bidireccional `[(...)]`
 
-Two-way binding gives your app a way to share data between a component class and
-its template.
+El enlace bidireccional le brinda a su aplicación una forma de compartir datos entre una clase de componente y la plantilla.
 
 <div class="alert is-helpful">
 
-See the <live-example></live-example> for a working example containing the code snippets in this guide.
+Consulta el <live-example></live-example> para ver un ejemplo funcional que contiene los fragmentos de código de esta guía.
+
 
 </div>
 
-## Basics of two-way binding
+## Conceptos básicos del enlace bidireccional
 
-Two-way binding does two things:
+El enlace bidireccional hace dos cosas:
 
-1. Sets a specific element property.
-1. Listens for an element change event.
+1. Establece una propiedad de elemento específica.
+1. Escucha un evento de cambio de elemento.
 
-Angular offers a special _two-way data binding_ syntax for this purpose, `[()]`.
-The `[()]` syntax combines the brackets
-of property binding, `[]`, with the parentheses of event binding, `()`.
+Angular ofrece una sintaxis especial _enlace de datos bidireccional_ para este propósito, `[()]`.
+La sintaxis `[()]` combina los corchetes
+de enlace de propiedad, `[]`, con el paréntesis de vinculación de eventos, `()`.
 
 <div class="callout is-important">
 
 <header>
-  [( )] = banana in a box
+  [( )] = banana en una caja
 </header>
 
-Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
+Visualiza una *banana en una caja* para recordar que los paréntesis van _dentro_ de los corchetes.
 
 </div>
 
-The `[()]` syntax is easy to demonstrate when the element has a settable
-property called `x` and a corresponding event named `xChange`.
-Here's a `SizerComponent` that fits this pattern.
-It has a `size` value property and a companion `sizeChange` event:
+La sintaxis `[()]` es fácil de demostrar cuando el elemento tiene un valor configurable
+propiedad llamada `x` y un evento correspondiente llamado `xChange`.
+Aquí hay un `SizerComponent` que se ajusta a este patrón.
+Tiene una propiedad de valor `size` y un evento acompañante `sizeChange`:
 
 <code-example path="two-way-binding/src/app/sizer/sizer.component.ts" header="src/app/sizer.component.ts"></code-example>
 
 <code-example path="two-way-binding/src/app/sizer/sizer.component.html" header="src/app/sizer.component.html"></code-example>
 
-The initial `size` is an input value from a property binding.
-Clicking the buttons increases or decreases the `size`, within
-min/max value constraints,
-and then raises, or emits, the `sizeChange` event with the adjusted size.
+El `size` inicial es un valor de entrada de un enlace de propiedad.
+Al hacer clic en los botones, aumenta o disminuye el `size`, dentro de
+restricciones de valor mínimo/máximo,
+y luego genera, o emite, el evento `sizeChange` con el tamaño ajustado.
 
-Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
+Aquí hay un ejemplo en el que `AppComponent.fontSizePx` está enlazado en dos direcciones al `SizerComponent`:
 
 <code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-1)" region="two-way-1"></code-example>
 
-The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value.
+El `AppComponent.fontSizePx` establece el valor inicial de `SizerComponent.size`.
 
 <code-example path="two-way-binding/src/app/app.component.ts" header="src/app/app.component.ts" region="font-size"></code-example>
 
-Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
-The revised `AppComponent.fontSizePx` value flows through to the _style_ binding,
-making the displayed text bigger or smaller.
+Al hacer clic en los botones, se actualiza `AppComponent.fontSizePx` a través del enlace bidireccional.
+El valor revisado de `AppComponent.fontSizePx` fluye a través del enlace _style_,
+haciendo que el texto mostrado sea más grande o más pequeño.
 
-The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
-Angular desugars the `SizerComponent` binding into this:
+La sintaxis de enlace bidireccional es en realidad sólo azúcar sintáctica para un enlace _property_ y un enlace _event_.
+Angular quita el azúcar de el enlace `SizerComponent` en esto:
 
 <code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-2)" region="two-way-2"></code-example>
 
-The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
-Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
+La variable `$event` contiene la carga útil del evento `SizerComponent.sizeChange`.
+Angular asigna el valor `$event` al ʻAppComponent.fontSizePx` cuando el usuario hace clic en los botones.
 
-## Two-way binding in forms
+## Enlace bidireccional en formularios
 
-The two-way binding syntax is a great convenience compared to
-separate property and event bindings. It would be convenient to
-use two-way binding with HTML form elements like `<input>` and
-`<select>`. However, no native HTML element follows the `x`
-value and `xChange` event pattern.
+La sintaxis de enlace bidireccional es una gran comodidad en comparación con
+propiedades independientes y enlaces de eventos. Seria conveniente
+utilizar enlace bidireccional con elementos de formulario HTML como `<input>` y
+`<select>`. Sin embargo, ningún elemento HTML nativo sigue a el valor `x`
+ y el patrón de evento `xChange`.
 
-For more on how to use two-way binding in forms, see
+Para obtener más información sobre cómo utilizar la vinculación bidireccional en formularios, consulte
 Angular [NgModel](guide/built-in-directives#ngModel).
diff --git a/aio/content/tutorial/toh-pt2.en.md b/aio/content/tutorial/toh-pt2.en.md
deleted file mode 100644
index ce094dac3f499..0000000000000
--- a/aio/content/tutorial/toh-pt2.en.md
+++ /dev/null
@@ -1,253 +0,0 @@
-# Display a selection list
-
-In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
-allow users to select a hero and display the hero's details.
-
-<div class="alert is-helpful">
-
-  For the sample app that this page describes, see the <live-example></live-example>.
-
-</div>
-
-
-## Create mock heroes
-
-You'll need some heroes to display.
-
-Eventually you'll get them from a remote data server.
-For now, you'll create some _mock heroes_ and pretend they came from the server.
-
-Create a file called `mock-heroes.ts` in the `src/app/` folder.
-Define a `HEROES` constant as an array of ten heroes and export it.
-The file should look like this.
-
-<code-example path="toh-pt2/src/app/mock-heroes.ts" header="src/app/mock-heroes.ts"></code-example>
-
-## Displaying heroes
-
-Open the `HeroesComponent` class file and import the mock `HEROES`.
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" header="src/app/heroes/heroes.component.ts (import HEROES)">
-</code-example>
-
-In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding.
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="component">
-</code-example>
-
-### List heroes with `*ngFor`
-
-Open the `HeroesComponent` template file and make the following changes:
-
-* Add an `<h2>` at the top,
-* Below it add an HTML unordered list (`<ul>`)
-* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
-* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
-
-Make it look like this:
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" header="heroes.component.html (heroes template)"></code-example>
-
-That shows one hero. To list them all, add an `*ngFor` to the `<li>` to iterate through the list of heroes:
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
-</code-example>
-
-The [`*ngFor`](guide/built-in-directives#ngFor) is Angular's _repeater_ directive.
-It repeats the host element for each element in a list.
-
-The syntax in this example is as follows:
-
-* `<li>` is the host element.
-* `heroes` holds the mock heroes list from the `HeroesComponent` class, the mock heroes list.
-* `hero` holds the current hero object for each iteration through the list.
-
-<div class="alert is-important">
-
-Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax.
-
-</div>
-
-After the browser refreshes, the list of heroes appears.
-
-{@a styles}
-
-### Style the heroes
-
-The heroes list should be attractive and should respond visually when users
-hover over and select a hero from the list.
-
-In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
-That stylesheet didn't include styles for this list of heroes.
-
-You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
-
-You may prefer instead to define private styles for a specific component and keep everything a component needs&mdash; the code, the HTML,
-and the CSS &mdash;together in one place.
-
-This approach makes it easier to re-use the component somewhere else
-and deliver the component's intended appearance even if the global styles are different.
-
-You define private styles either inline in the `@Component.styles` array or
-as stylesheet file(s) identified in the `@Component.styleUrls` array.
-
-When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent`
-and pointed to it in `@Component.styleUrls` like this.
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata"
- header="src/app/heroes/heroes.component.ts (@Component)">
-</code-example>
-
-Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`.
-You'll find them in the [final code review](#final-code-review) at the bottom of this guide.
-
-<div class="alert is-important">
-
-Styles and stylesheets identified in `@Component` metadata are scoped to that specific component.
-The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component.
-
-</div>
-
-## Master/Detail
-
-When the user clicks a hero in the **master** list,
-the component should display the selected hero's **details** at the bottom of the page.
-
-In this section, you'll listen for the hero item click event
-and update the hero detail.
-
-### Add a click event binding
-
-Add a click event binding to the `<li>` like this:
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example>
-
-This is an example of Angular's [event binding](guide/event-binding) syntax.
-
-The parentheses around `click` tell Angular to listen for the `<li>` element's  `click` event.
-When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
-
-
-In the next section, define an `onSelect()` method in `HeroesComponent` to
-display the hero that was defined in the `*ngFor` expression.
-
-
-### Add the click event handler
-
-Rename the component's `hero` property to `selectedHero` but don't assign it.
-There is no _selected hero_ when the application starts.
-
-Add the following `onSelect()` method, which assigns the clicked hero from the template
-to the component's `selectedHero`.
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" header="src/app/heroes/heroes.component.ts (onSelect)"></code-example>
-
-### Add a details section
-
-Currently, you have a list in the component template. To click on a hero on the list
-and reveal details about that hero, you need a section for the details to render in the
-template. Add the following to `heroes.component.html` beneath the list section:
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)"></code-example>
-
-After the browser refreshes, the application is broken.
-
-Open the browser developer tools and look in the console for an error message like this:
-
-<code-example language="sh" class="code-shell">
-  HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
-</code-example>
-
-#### What happened?
-
-When the app starts, the `selectedHero` is `undefined` _by design_.
-
-Binding expressions in the template that refer to properties of `selectedHero`&mdash;expressions like `{{selectedHero.name}}`&mdash;_must fail_ because there is no selected hero.
-
-
-#### The fix - hide empty details with _*ngIf_
-
-
-The component should only display the selected hero details if the `selectedHero` exists.
-
-Wrap the hero detail HTML in a `<div>`.
-Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
-
-
-<div class="alert is-important">
-
-Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
-
-</div>
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" header="src/app/heroes/heroes.component.html (*ngIf)"></code-example>
-
-After the browser refreshes, the list of names reappears.
-The details area is blank.
-Click a hero in the list of heroes and its details appear.
-The app seems to be working again.
-The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
-
-
-#### Why it works
-
-When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to consider.
-
-When the user picks a hero, `selectedHero` has a value and
-`ngIf` puts the hero detail into the DOM.
-
-### Style the selected hero
-
-It's difficult to identify the _selected hero_ in the list when all `<li>` elements look alike.
-
-If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
-
-<div class="lightbox">
-  <img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
-</div>
-
-That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
-You just have to apply the `.selected` class to the `<li>` when the user clicks it.
-
-The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally.
-Just add `[class.some-css-class]="some-condition"` to the element you want to style.
-
-Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example>
-
-When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class.
-
-The finished `<li>` looks like this:
-
-<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="li" header="heroes.component.html (list item hero)"></code-example>
-
-{@a final-code-review}
-
-## Final code review
-
-Here are the code files discussed on this page, including the `HeroesComponent` styles.
-
-<code-tabs>
-
-  <code-pane header="src/app/mock-heroes.ts" path="toh-pt2/src/app/mock-heroes.ts">
-  </code-pane>
-
-  <code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts">
-  </code-pane>
-
-  <code-pane header="src/app/heroes/heroes.component.html" path="toh-pt2/src/app/heroes/heroes.component.html">
-  </code-pane>
-
-  <code-pane header="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
-  </code-pane>
-
-</code-tabs>
-
-## Summary
-
-* The Tour of Heroes app displays a list of heroes in a Master/Detail view.
-* The user can select a hero and see that hero's details.
-* You used `*ngFor` to display a list.
-* You used `*ngIf` to conditionally include or exclude a block of HTML.
-* You can toggle a CSS style class with a `class` binding.
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
index f1195a6467286..ce094dac3f499 100644
--- a/aio/content/tutorial/toh-pt2.md
+++ b/aio/content/tutorial/toh-pt2.md
@@ -1,223 +1,238 @@
-# Mostrar una lista de selección
+# Display a selection list
 
-En esta página, ampliaremos la aplicación Tour de Héroes para mostrar una lista de héroes,
-Permite al usuario seleccionar un héroe y ver los detalles del héroe.
+In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
+allow users to select a hero and display the hero's details.
 
 <div class="alert is-helpful">
 
-Para ver la aplicación de ejemplo que describe esta página, consulte el  <live-example></live-example>.
+  For the sample app that this page describes, see the <live-example></live-example>.
 
 </div>
 
 
-## Crea un simulacro de héroe
+## Create mock heroes
 
-Primero, necesitarás algunos héroes para mostrar.
-Eventualmente los obtendrá de un servidor de datos remoto. Por ahora, creará algunos _héroes simulados_ y pretenderá que provienen del servidor.
+You'll need some heroes to display.
 
-Cree un archivo llamado `mock-heroes.ts` en la carpeta `src/app/`.
-Defina la constante `HEROES` como un conjunto de 10 héroes y expórtela.
-El archivo se verá así:
+Eventually you'll get them from a remote data server.
+For now, you'll create some _mock heroes_ and pretend they came from the server.
+
+Create a file called `mock-heroes.ts` in the `src/app/` folder.
+Define a `HEROES` constant as an array of ten heroes and export it.
+The file should look like this.
 
 <code-example path="toh-pt2/src/app/mock-heroes.ts" header="src/app/mock-heroes.ts"></code-example>
 
-## Mostrar Héroe
+## Displaying heroes
 
-Abra el archivo de clase `HeroesComponent` e importe el mock `HEROES`.
+Open the `HeroesComponent` class file and import the mock `HEROES`.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" header="src/app/heroes/heroes.component.ts (import HEROES)">
 </code-example>
 
-En el mismo archivo (clase `HeroesComponent`), defina una propiedad de componente llamada `heroes` para exponer el array HEROES para la vinculación.
+In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="component">
 </code-example>
 
-### Enumerar héroes con `*ngFor`
+### List heroes with `*ngFor`
 
-Abra las Plantillas `HeroesComponent` y realice los siguientes cambios:
+Open the `HeroesComponent` template file and make the following changes:
 
-* Agregue `<h2>` al principio
-* Agregue una lista HTML desordenada (`<ul>`) debajo de ella
-* Inserte `<li>` dentro del `<ul>` que muestra la propiedad `hero`
-* Espolvorea algunas clases CSS al estilo (agregaremos estilos CSS en breve)
+* Add an `<h2>` at the top,
+* Below it add an HTML unordered list (`<ul>`)
+* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
+* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
 
-Se parece a esto:
+Make it look like this:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" header="heroes.component.html (heroes template)"></code-example>
 
-Esto muestra un héroe. Para enumerarlos a todos, agregue `*ngFor*` a `<li>` para iterar sobre la lista de héroes.
+That shows one hero. To list them all, add an `*ngFor` to the `<li>` to iterate through the list of heroes:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
 </code-example>
 
-[`*ngFor`](guide/template-syntax#ngFor) es la directiva de _repetición_ de Angular.
-
-Esto repite el elemento host para cada elemento de la lista.
+The [`*ngFor`](guide/built-in-directives#ngFor) is Angular's _repeater_ directive.
+It repeats the host element for each element in a list.
 
-La sintaxis para este ejemplo es:
+The syntax in this example is as follows:
 
-* `<li>` es un elemento host
-* `heroes` es una lista de clases `HeroesComponent` que contiene la lista de héroes simulados
-* `hero` contiene el objeto héroe actual en una lista para cada ciclo
+* `<li>` is the host element.
+* `heroes` holds the mock heroes list from the `HeroesComponent` class, the mock heroes list.
+* `hero` holds the current hero object for each iteration through the list.
 
 <div class="alert is-important">
 
-No olvide el asterisco (*) antes del `ngFor`. Esta es una parte importante de la sintaxis.
+Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax.
 
 </div>
 
-Actualiza tu navegador para ver la lista de héroes.
+After the browser refreshes, the list of heroes appears.
 
 {@a styles}
 
-### Agregar estilo a los héroes
-
-La lista de héroes debe ser atractiva y visualmente prominente cuando el usuario coloca el cursor y selecciona un héroe de la lista.
+### Style the heroes
 
-En [Primer tutorial](tutorial/toh-pt0#app-wide-styles), configuro el estilo básico de toda la aplicación en `styles.css`.
+The heroes list should be attractive and should respond visually when users
+hover over and select a hero from the list.
 
-No incluí el estilo de la lista de héroes en esta hoja de estilo.
+In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
+That stylesheet didn't include styles for this list of heroes.
 
-Puede agregar más estilos a `styles.css` y seguir expandiendo esa hoja de estilo a medida que agrega componentes
+You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
 
-Es posible que prefiera definir un estilo privado para un componente en particular y mantener todo lo que el componente necesita &mdash;
-código, HTML, CSS&mdash; en un solo lugar.
+You may prefer instead to define private styles for a specific component and keep everything a component needs&mdash; the code, the HTML,
+and the CSS &mdash;together in one place.
 
-Este enfoque facilita la reutilización del componente en otro lugar y aún así proporciona al componente la apariencia deseada, incluso cuando los estilos aplicados globalmente son diferentes.
+This approach makes it easier to re-use the component somewhere else
+and deliver the component's intended appearance even if the global styles are different.
 
-Los estilos privados se definen en línea dentro de la matriz `@Component.styles` o como un archivo de hoja de estilo identificado en una matriz particular `@Component.styleUrls` como un archivo de hoja de estilo.
+You define private styles either inline in the `@Component.styles` array or
+as stylesheet file(s) identified in the `@Component.styleUrls` array.
 
-Cuando la CLI crea un `HeroesComponent`, se crea un `heroes.component.css` vacío para el `HeroesComponent`.
-`@Component.styleUrls` se señala de esta manera.
+When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent`
+and pointed to it in `@Component.styleUrls` like this.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata"
  header="src/app/heroes/heroes.component.ts (@Component)">
 </code-example>
 
-Abra `heroes.component.css` y pegue el estilo privado para `HeroesComponent`.
-Puede encontrarlos en la [Revisión del código final](#final-code-review) al final de esta guía.
+Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`.
+You'll find them in the [final code review](#final-code-review) at the bottom of this guide.
 
 <div class="alert is-important">
 
-`@Component` Los estilos y las hojas de estilo identificados en los metadatos se definen en un componente en particular.
-El estilo `heroes.component.css` solo se aplica a `HeroesComponent` y no afecta a otros HTML o HTML dentro de ningún otro componente.
+Styles and stylesheets identified in `@Component` metadata are scoped to that specific component.
+The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component.
+
 </div>
 
-## Maestro/Detalle
+## Master/Detail
 
-Cuando haces clic en un héroe en la lista **maestro**, el componente debe mostrar los **detalles** del héroe seleccionado en la parte inferior de la página.
+When the user clicks a hero in the **master** list,
+the component should display the selected hero's **details** at the bottom of the page.
 
-En este capítulo, esperemos a que se haga clic en el elemento del héroe y luego actualice los detalles del héroe.
+In this section, you'll listen for the hero item click event
+and update the hero detail.
 
-### Agregar enlace de evento de clic
+### Add a click event binding
 
-Agregue el enlace de evento click a su `<li>` así:
+Add a click event binding to the `<li>` like this:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example>
 
-Este es un ejemplo de la sintaxis de Angular [enlace de eventos](guide/template-syntax#event-binding) .
+This is an example of Angular's [event binding](guide/event-binding) syntax.
+
+The parentheses around `click` tell Angular to listen for the `<li>` element's  `click` event.
+When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
+
 
-Los paréntesis alrededor del `clic` le dicen a Angular que es un evento `clic` para el elemento `<li>`.
-Cuando el usuario hace clic en `<li>`, Angular ejecuta la expresión `onSelect(hero)`.
+In the next section, define an `onSelect()` method in `HeroesComponent` to
+display the hero that was defined in the `*ngFor` expression.
 
-En la siguiente sección, definiremos el método `onSelect()` en el `HeroesComponent` para mostrar los héroes definidos por las expresiones `*ngFor`.
 
-### Agregar un controlador de eventos de clic
+### Add the click event handler
 
-Cambie el nombre de la propiedad `hero` del componente a `selectedHero`, pero no la asigne todavía.
-No hay _héroe seleccionado_ cuando se inicia la aplicación.
+Rename the component's `hero` property to `selectedHero` but don't assign it.
+There is no _selected hero_ when the application starts.
 
-Agregue el método `onSelect()` de la siguiente manera y asigne el héroe en el que se hizo clic desde Plantillas al componente 'seleccionadoHero`.
+Add the following `onSelect()` method, which assigns the clicked hero from the template
+to the component's `selectedHero`.
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" header="src/app/heroes/heroes.component.ts (onSelect)"></code-example>
 
-### Agregar una sección de detalles
+### Add a details section
 
-Actualmente, el componente Plantillas tiene una lista.
-Para hacer clic en un héroe en la lista para ver los detalles de ese héroe, necesita una sección de detalles para representarlo en Plantillas.
-Agregue lo siguiente debajo de la sección de la lista de `heroes.component.html`.
+Currently, you have a list in the component template. To click on a hero on the list
+and reveal details about that hero, you need a section for the details to render in the
+template. Add the following to `heroes.component.html` beneath the list section:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)"></code-example>
 
-Cuando actualizo el navegador, la aplicación está rota.
+After the browser refreshes, the application is broken.
 
-Abra las herramientas de desarrollador de su navegador y busque un mensaje de error como este en la consola:
+Open the browser developer tools and look in the console for an error message like this:
 
 <code-example language="sh" class="code-shell">
-  HeroesComponent.html:3 ERROR TypeError: no se puede leer la propiedad 'nombre' de undefined
+  HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
 </code-example>
 
-### ¿Que pasó?
+#### What happened?
 
-Cuando inicia la aplicación, `selectedHero` es _intencionalmente_ indefinido`.
+When the app starts, the `selectedHero` is `undefined` _by design_.
 
-Los enlaces de expresión en Plantillas que se refieren a las propiedades de `selectedHero` - expresiones como` {{{selectedHero.name}} `deben _fallar_ porque el héroe seleccionado no existe, no.
+Binding expressions in the template that refer to properties of `selectedHero`&mdash;expressions like `{{selectedHero.name}}`&mdash;_must fail_ because there is no selected hero.
 
-### Reparemos-use  _*ngIf_ para ocultar detalles vacíos
 
-El componente solo debe mostrar detalles para el héroe seleccionado si `selectedHero` está presente.
+#### The fix - hide empty details with _*ngIf_
+
+
+The component should only display the selected hero details if the `selectedHero` exists.
+
+Wrap the hero detail HTML in a `<div>`.
+Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
 
-Adjunte los detalles del héroe en HTML `<div>`.
-Agregue la directiva angular `*ngIf` a su `<div>` y configúrelo en `selectedHero`.
 
 <div class="alert is-important">
 
-No olvide el asterisco (*) antes del `ngIf`. Esta es una parte importante de la sintaxis.
+Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
 
 </div>
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" header="src/app/heroes/heroes.component.html (*ngIf)"></code-example>
 
-Actualice su navegador y verá la lista de nombres nuevamente.
-El área de detalles está en blanco.
-Haga clic en un héroe en la lista de héroes para ver más detalles.
-La aplicación comenzó a funcionar nuevamente.
-Los héroes se muestran en la lista, y los detalles del héroe seleccionado se muestran en la parte inferior de la página.
+After the browser refreshes, the list of names reappears.
+The details area is blank.
+Click a hero in the list of heroes and its details appear.
+The app seems to be working again.
+The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
 
-### Por qué esto funciona
 
-Cuando `selectedHero` no está definido, `ngIf` elimina los detalles del héroe del DOM. No hay obligación de preocuparse por `selectedHero`.
+#### Why it works
 
-Cuando el usuario selecciona un héroe, `selectedHero` tiene un valor y `ngIf` inserta los detalles del héroe en el DOM.
+When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to consider.
 
-### Dar estilo a el héroe seleccionado
+When the user picks a hero, `selectedHero` has a value and
+`ngIf` puts the hero detail into the DOM.
 
-Si todos los elementos `<li>` se parecen, es difícil identificar al _héroe seleccionado_ en la lista.
+### Style the selected hero
 
-Si el usuario hace clic en "Magneta", el héroe debe dibujarse con un color de fondo prominente como este:
+It's difficult to identify the _selected hero_ in the list when all `<li>` elements look alike.
+
+If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
 
 <div class="lightbox">
   <img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
 </div>
 
-El color del _héroe seleccionado_ es el trabajo de la clase CSS `.selected` en [el estilo que acaba de agregar](#styles).
-Simplemente aplica la clase `.selected` a `<li>` cuando el usuario hace clic.
+That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
+You just have to apply the `.selected` class to the `<li>` when the user clicks it.
 
-El [enlace de clase](guide/template-syntax#class-binding)de Angular facilita la adición y eliminación de clases CSS condicionales.
-Simplemente agregue `[class.some-css-class] =" some-condition"` al elemento que desea decorar.
+The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally.
+Just add `[class.some-css-class]="some-condition"` to the element you want to style.
 
-Agregue el enlace `[class.selected]` al `<li>` en `HeroesComponent` Plantillas:
+Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example>
 
-Si el héroe de la fila actual es el mismo que de `selectedHero`, Angular agrega una clase CSS `selected`.Cuando los dos héroes son diferentes, Angular eliminará la clase.
+When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class.
 
-El `<li>` completado se ve así:
+The finished `<li>` looks like this:
 
-<code-example path = "toh-pt2/src/app/heroes/heroes.component.html" region = "li" header = "heroes.component.html (elemento de lista hero)"> </code-example>
+<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="li" header="heroes.component.html (list item hero)"></code-example>
 
 {@a final-code-review}
 
-## Revisión final del código
+## Final code review
 
-Aquí está el archivo de código en esta página que incluye el estilo `HeroesComponent`.
+Here are the code files discussed on this page, including the `HeroesComponent` styles.
 
 <code-tabs>
 
   <code-pane header="src/app/mock-heroes.ts" path="toh-pt2/src/app/mock-heroes.ts">
   </code-pane>
-  
+
   <code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts">
   </code-pane>
 
@@ -226,12 +241,13 @@ Aquí está el archivo de código en esta página que incluye el estilo `HeroesC
 
   <code-pane header="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
   </code-pane>
+
 </code-tabs>
 
-## Resumen
+## Summary
 
-* La aplicación "Tour de Héroes" muestra una lista de héroes en la pantalla Maestro / Detalle
-* El usuario puede seleccionar un héroe y ver los detalles de ese héroe
-* Utilizó `*ngFor` para mostrar la lista
-* Utilizó `*ngIf` para incluir o excluir condicionalmente bloques de HTML
-* La clase de estilo CSS se puede cambiar con el enlace `class`
+* The Tour of Heroes app displays a list of heroes in a Master/Detail view.
+* The user can select a hero and see that hero's details.
+* You used `*ngFor` to display a list.
+* You used `*ngIf` to conditionally include or exclude a block of HTML.
+* You can toggle a CSS style class with a `class` binding.

From 7e0be66f20904605a7024ab7e38497b0ce4bd004 Mon Sep 17 00:00:00 2001
From: Antonio Cardenas <antonioalx66@gmail.com>
Date: Thu, 22 Oct 2020 11:35:52 -0600
Subject: [PATCH 3/3] archivo en ingles agregado

---
 aio/content/guide/two-way-binding.en.md | 76 +++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 aio/content/guide/two-way-binding.en.md

diff --git a/aio/content/guide/two-way-binding.en.md b/aio/content/guide/two-way-binding.en.md
new file mode 100644
index 0000000000000..a824130c70fdd
--- /dev/null
+++ b/aio/content/guide/two-way-binding.en.md
@@ -0,0 +1,76 @@
+# Two-way binding `[(...)]`
+
+Two-way binding gives your app a way to share data between a component class and
+its template.
+
+<div class="alert is-helpful">
+
+See the <live-example></live-example> for a working example containing the code snippets in this guide.
+
+</div>
+
+## Basics of two-way binding
+
+Two-way binding does two things:
+
+1. Sets a specific element property.
+1. Listens for an element change event.
+
+Angular offers a special _two-way data binding_ syntax for this purpose, `[()]`.
+The `[()]` syntax combines the brackets
+of property binding, `[]`, with the parentheses of event binding, `()`.
+
+<div class="callout is-important">
+
+<header>
+  [( )] = banana in a box
+</header>
+
+Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
+
+</div>
+
+The `[()]` syntax is easy to demonstrate when the element has a settable
+property called `x` and a corresponding event named `xChange`.
+Here's a `SizerComponent` that fits this pattern.
+It has a `size` value property and a companion `sizeChange` event:
+
+<code-example path="two-way-binding/src/app/sizer/sizer.component.ts" header="src/app/sizer.component.ts"></code-example>
+
+<code-example path="two-way-binding/src/app/sizer/sizer.component.html" header="src/app/sizer.component.html"></code-example>
+
+The initial `size` is an input value from a property binding.
+Clicking the buttons increases or decreases the `size`, within
+min/max value constraints,
+and then raises, or emits, the `sizeChange` event with the adjusted size.
+
+Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
+
+<code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-1)" region="two-way-1"></code-example>
+
+The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value.
+
+<code-example path="two-way-binding/src/app/app.component.ts" header="src/app/app.component.ts" region="font-size"></code-example>
+
+Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
+The revised `AppComponent.fontSizePx` value flows through to the _style_ binding,
+making the displayed text bigger or smaller.
+
+The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
+Angular desugars the `SizerComponent` binding into this:
+
+<code-example path="two-way-binding/src/app/app.component.html" header="src/app/app.component.html (two-way-2)" region="two-way-2"></code-example>
+
+The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
+Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
+
+## Two-way binding in forms
+
+The two-way binding syntax is a great convenience compared to
+separate property and event bindings. It would be convenient to
+use two-way binding with HTML form elements like `<input>` and
+`<select>`. However, no native HTML element follows the `x`
+value and `xChange` event pattern.
+
+For more on how to use two-way binding in forms, see
+Angular [NgModel](guide/built-in-directives#ngModel).