From f6936406ca557f84ca752f3173a9a75db6517fef Mon Sep 17 00:00:00 2001
From: Antonio Cardenas <antonioalx66@gmail.com>
Date: Tue, 6 Apr 2021 17:40:39 -0600
Subject: [PATCH] docs: translate tutorial/toh-pt2.md (#280)

---
 aio/content/marketing/presskit.html | 404 ++++++++++++++++------------
 aio/content/tutorial/toh-pt2.en.md  | 253 +++++++++++++++++
 aio/content/tutorial/toh-pt2.md     | 220 +++++++--------
 3 files changed, 591 insertions(+), 286 deletions(-)
 create mode 100644 aio/content/tutorial/toh-pt2.en.md

diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html
index 4ae5b7cca4..a239507618 100644
--- a/aio/content/marketing/presskit.html
+++ b/aio/content/marketing/presskit.html
@@ -1,18 +1,19 @@
 <header class="marketing-banner">
-  <h1 class="banner-headline no-toc no-anchor">Press kit</h1>
+  <h1 class="banner-headline no-toc no-anchor">Carpeta de prensa</h1>
 </header>
 
 <article class="presskit-container">
   <div class="presskit-row">
     <div class="presskit-inner">
       <div>
-        <h2>ANGULAR LOGO</h2>
+        <h2>LOGO DE ANGULAR</h2>
         <p>
-          The logo graphics available for download on this page are provided under
+          Los gráficos del logotipo disponibles para descargar en esta página se proporcionan en
           <a class="cc-by-anchor" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-          This means that you can pretty much do what you like with it including printing it on shirts, creating your own variations, or getting it tattooed over your navel.
+          Esto significa que puedes hacer lo que quieras con él, incluso imprimirlo en camisetas, crear tu
+          propias variaciones, o tatuartele sobre el ombligo.
         </p>
-        <p>We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.</p>
+        <p>Te pedimos que no utilices el resto de los gráficos del sitio en otros contextos para evitar confusiones.</p>
       </div>
     </div>
   </div>
@@ -23,13 +24,15 @@
         <img src="assets/images/logos/angular/angular.svg" alt="Full color logo Angular">
       </div>
       <div>
-        <h3 class="l-space-left-3">FULL COLOR LOGO</h3>
+        <h3 class="l-space-left-3">LOGOTIPO A TODO COLOR</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Angular Logo (png) - <a href="assets/images/logos/angular/angular.png" download>Download</a></span>
+            <span>Logo de Angular (png) - <a href="assets/images/logos/angular/angular.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Angular Logo (svg) - <a href="assets/images/logos/angular/angular.svg" download>Download</a></span>
+            <span>Logo de Angular (svg) - <a href="assets/images/logos/angular/angular.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -44,13 +47,15 @@
         </div>
       </div>
       <div>
-        <h3 class="l-space-left-3">ONE COLOR LOGO</h3>
+        <h3 class="l-space-left-3">LOGOTIPO DE UN COLOR</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Angular Logo Black (png) - <a href="assets/images/logos/angular/angular_solidBlack.png" download>Download</a></span>
+            <span>Logo Angular en Negro (png) - <a href="assets/images/logos/angular/angular_solidBlack.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Angular Logo Black (svg) - <a href="assets/images/logos/angular/angular_solidBlack.svg" download>Download</a></span>
+            <span>Logo Angular en Negro (svg) - <a href="assets/images/logos/angular/angular_solidBlack.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -61,17 +66,20 @@
     <div class="presskit-inner">
       <div class="presskit-image-container">
         <div>
-          <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg" alt="Transparent logo Angular">
+          <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg"
+            alt="Transparent logo Angular">
         </div>
       </div>
       <div>
-        <h3 class="l-space-left-3">ONE COLOR INVERSE LOGO</h3>
+        <h3 class="l-space-left-3">LOGOTIPO INVERSO DE UN COLOR</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Angular Logo White Semi-Transparent (png) - <a href="assets/images/logos/angular/angular_whiteTransparent.png" download>Download</a></span>
+            <span>Logo Angular White Semi-Transparent (png) - <a
+                href="assets/images/logos/angular/angular_whiteTransparent.png" download>Descargar</a></span>
           </li>
           <li>
-            <span>Angular Logo Semi-Transparent (svg) - <a href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Download</a></span>
+            <span>Logo Angular Semi-Transparente (svg) - <a
+                href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -81,7 +89,7 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div>
-        <h2>BRAND ICONS</h2>
+        <h2>ICONOS DE MARCA</h2>
       </div>
     </div>
   </div>
@@ -89,16 +97,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/animations.png" alt="Animations Icon">
+        <img src="generated/images/marketing/concept-icons/animations.png" alt="Icono de Animaciones">
       </div>
       <div>
-        <h3 class="l-space-left-3">ANIMATIONS</h3>
+        <h3 class="l-space-left-3">ANIMACIONES</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Animations Icon (png) - <a href="generated/images/marketing/concept-icons/animations.png" download>Download</a></span>
+            <span>Icono de Animaciones (png) - <a href="generated/images/marketing/concept-icons/animations.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Animations Icon (svg) - <a href="generated/images/marketing/concept-icons/animations.svg" download>Download</a></span>
+            <span>Icono de Animaciones (svg) - <a href="generated/images/marketing/concept-icons/animations.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -108,16 +118,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/augury.png" alt="Augury Icon">
+        <img src="generated/images/marketing/concept-icons/augury.png" alt="Icono de Augury">
       </div>
       <div>
         <h3 class="l-space-left-3">AUGURY</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Augury Icon (png) - <a href="generated/images/marketing/concept-icons/augury.png" download>Download</a></span>
+            <span>Icono de Augury (png) - <a href="generated/images/marketing/concept-icons/augury.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Augury Icon (svg) - <a href="generated/images/marketing/concept-icons/augury.svg" download>Download</a></span>
+            <span>Icono de Augury (svg) - <a href="generated/images/marketing/concept-icons/augury.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -127,35 +139,60 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/cdk.png" alt="CDK Icon">
+        <img src="generated/images/marketing/concept-icons/cdk.png" alt="Icono de CDK">
       </div>
       <div>
-        <h3 class="l-space-left-3">COMPONENT DEV KIT (CDK)</h3>
+        <h3 class="l-space-left-3">KIT DE DESARROLLO DE COMPONENTES (CDK)</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>CDK Icon (png) - <a href="generated/images/marketing/concept-icons/cdk.png" download>Download</a></span>
+            <span>Icono de CDK (png) - <a href="generated/images/marketing/concept-icons/cdk.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>CDK Icon (svg) - <a href="generated/images/marketing/concept-icons/cdk.svg" download>Download</a></span>
+            <span>Icono de CDK (svg) - <a href="generated/images/marketing/concept-icons/cdk.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
     </div>
   </div>
 
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container"></div>
+      <img src="generated/images/marketing/concept-icons/cli.png" alt="Icono de el CLI">
+    </div>
+    <div>
+      <h3 class="l-space-left-3">CLI</h3>
+      <ul class="l-space-left-3">
+        <li>
+          <span>Icono de el CLI (png) - <a href="generated/images/marketing/concept-icons/cli.png"
+              download>Descargar</a></span>
+        </li>
+        <li>
+          <span>Icono de el CLI (svg) - <a href="generated/images/marketing/concept-icons/cli.svg"
+              download>Descargar</a></span>
+        </li>
+      </ul>
+    </div>
+  </div>
+  </div>
+
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/cli.png" alt="CLI Icon">
+        <img src="generated/images/marketing/concept-icons/compiler.png" alt="Icono de Compilador">
       </div>
       <div>
-        <h3 class="l-space-left-3">CLI</h3>
+        <h3 class="l-space-left-3">COMPILADOR</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>CLI Icon (png) - <a href="generated/images/marketing/concept-icons/cli.png" download>Download</a></span>
+            <span>Icono de Compilador (png) - <a href="generated/images/marketing/concept-icons/compiler.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>CLI Icon (svg) - <a href="generated/images/marketing/concept-icons/cli.svg" download>Download</a></span>
+            <span>Icono de Compilador (svg) - <a href="generated/images/marketing/concept-icons/compiler.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -165,16 +202,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/compiler.png" alt="Compiler Icon">
+        <img src="generated/images/marketing/concept-icons/components.png" alt="Icono de Componentes Web">
       </div>
       <div>
-        <h3 class="l-space-left-3">COMPILER</h3>
+        <h3 class="l-space-left-3">COMPONENTES WEB</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Compiler Icon (png) - <a href="generated/images/marketing/concept-icons/compiler.png" download>Download</a></span>
+            <span>Icono de Componentes Web (png) - <a href="generated/images/marketing/concept-icons/components.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Compiler Icon (svg) - <a href="generated/images/marketing/concept-icons/compiler.svg" download>Download</a></span>
+            <span>Icono de Componentes Web (svg) - <a href="generated/images/marketing/concept-icons/components.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -184,16 +223,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/components.png" alt="Components Icon">
+        <img src="generated/images/marketing/concept-icons/forms.png" alt="Icono de Formularios">
       </div>
       <div>
-        <h3 class="l-space-left-3">WEB COMPONENTS</h3>
+        <h3 class="l-space-left-3">FORMULARIOS</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Web Components Icon (png) - <a href="generated/images/marketing/concept-icons/components.png" download>Download</a></span>
+            <span>Icono de Formularios (png) - <a href="generated/images/marketing/concept-icons/forms.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Web Components Icon (svg) - <a href="generated/images/marketing/concept-icons/components.svg" download>Download</a></span>
+            <span>Icono de Formularios (svg) - <a href="generated/images/marketing/concept-icons/forms.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -203,35 +244,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/forms.png" alt="Forms Icon">
-      </div>
-      <div>
-        <h3 class="l-space-left-3">FORMS</h3>
-        <ul class="l-space-left-3">
-          <li>
-            <span>Forms Icon (png) - <a href="generated/images/marketing/concept-icons/forms.png" download>Download</a></span>
-          </li>
-          <li>
-            <span>Forms Icon (svg) - <a href="generated/images/marketing/concept-icons/forms.svg" download>Download</a></span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <div class="presskit-row">
-    <div class="presskit-inner">
-      <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/http.png" alt="HTTP Icon">
+        <img src="generated/images/marketing/concept-icons/http.png" alt="Icono de HTTP">
       </div>
       <div>
         <h3 class="l-space-left-3">HTTP</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>HTTP Icon (png) - <a href="generated/images/marketing/concept-icons/http.png" download>Download</a></span>
+            <span>Icono de HTTP (png) - <a href="generated/images/marketing/concept-icons/http.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>HTTP Icon (svg) - <a href="generated/images/marketing/concept-icons/http.svg" download>Download</a></span>
+            <span>Icono de HTTP (svg) - <a href="generated/images/marketing/concept-icons/http.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -241,16 +265,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/i18n.png" alt="i18n Icon">
+        <img src="generated/images/marketing/concept-icons/i18n.png" alt="Icono de i18n">
       </div>
       <div>
         <h3 class="l-space-left-3">i18n</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>HTTP Icon (png) - <a href="generated/images/marketing/concept-icons/i18n.png" download>Download</a></span>
+            <span>Icono de HTTP (png) - <a href="generated/images/marketing/concept-icons/i18n.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>HTTP Icon (svg) - <a href="generated/images/marketing/concept-icons/i18n.svg" download>Download</a></span>
+            <span>Icono de HTTP (svg) - <a href="generated/images/marketing/concept-icons/i18n.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -260,16 +286,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/karma.png" alt="Karma Icon">
+        <img src="generated/images/marketing/concept-icons/karma.png" alt="Icono de Karma">
       </div>
       <div>
         <h3 class="l-space-left-3">KARMA</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Karma Icon (png) - <a href="generated/images/marketing/concept-icons/karma.png" download>Download</a></span>
+            <span>Icono de Karma (png) - <a href="generated/images/marketing/concept-icons/karma.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Karma Icon (svg) - <a href="generated/images/marketing/concept-icons/karma.svg" download>Download</a></span>
+            <span>Icono de Karma (svg) - <a href="generated/images/marketing/concept-icons/karma.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -279,16 +307,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/labs.png" alt="Labs Icon">
+        <img src="generated/images/marketing/concept-icons/labs.png" alt="Icono de Labs">
       </div>
       <div>
         <h3 class="l-space-left-3">LABS</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Labs Icon (png) - <a href="generated/images/marketing/concept-icons/labs.png" download>Download</a></span>
+            <span>Icono de Labs (png) - <a href="generated/images/marketing/concept-icons/labs.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Labs Icon (svg) - <a href="generated/images/marketing/concept-icons/labs.svg" download>Download</a></span>
+            <span>Icono de Labs (svg) - <a href="generated/images/marketing/concept-icons/labs.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -298,16 +328,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/language-services.png" alt="Language Services Icon">
+        <img src="generated/images/marketing/concept-icons/language-services.png" alt="Icono de Language Services">
       </div>
       <div>
         <h3 class="l-space-left-3">LANGUAGE SERVICES</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Language Services Icon (png) - <a href="generated/images/marketing/concept-icons/language-services.png" download>Download</a></span>
+            <span>Icono de Language Services (png) - <a
+                href="generated/images/marketing/concept-icons/language-services.png" download>Descargar</a></span>
           </li>
           <li>
-            <span>Language Services Icon (svg) - <a href="generated/images/marketing/concept-icons/language-services.svg" download>Download</a></span>
+            <span>Icono de Language Services (svg) - <a
+                href="generated/images/marketing/concept-icons/language-services.svg" download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -317,16 +349,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/material.png" alt="Material Icon">
+        <img src="generated/images/marketing/concept-icons/material.png" alt="Icono de Material">
       </div>
       <div>
         <h3 class="l-space-left-3">MATERIAL</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Material Icon (png) - <a href="generated/images/marketing/concept-icons/material.png" download>Download</a></span>
+            <span>Icono de material (png) - <a href="generated/images/marketing/concept-icons/material.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Material Icon (svg) - <a href="generated/images/marketing/concept-icons/material.svg" download>Download</a></span>
+            <span>Icono de material (svg) - <a href="generated/images/marketing/concept-icons/material.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -336,16 +370,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/protractor.png" alt="Protractor Icon">
+        <img src="generated/images/marketing/concept-icons/protractor.png" alt="Icono de Protractor">
       </div>
       <div>
         <h3 class="l-space-left-3">PROTRACTOR</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Protractor Icon (png) - <a href="generated/images/marketing/concept-icons/protractor.png" download>Download</a></span>
+            <span>Icono de Protractor (png) - <a href="generated/images/marketing/concept-icons/protractor.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Protractor Icon (svg) - <a href="generated/images/marketing/concept-icons/protractor.svg" download>Download</a></span>
+            <span>Icono de Protractor (svg) - <a href="generated/images/marketing/concept-icons/protractor.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -355,16 +391,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/pwa.png" alt="PWA Icon">
+        <img src="generated/images/marketing/concept-icons/pwa.png" alt="Icono de PWA">
       </div>
       <div>
         <h3 class="l-space-left-3">PWA</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>PWA Icon (png) - <a href="generated/images/marketing/concept-icons/pwa.png" download>Download</a></span>
+            <span>Icono de PWA (png) - <a href="generated/images/marketing/concept-icons/pwa.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>PWA Icon (svg) - <a href="generated/images/marketing/concept-icons/pwa.svg" download>Download</a></span>
+            <span>Icono de PWA (svg) - <a href="generated/images/marketing/concept-icons/pwa.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -374,16 +412,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/router.png" alt="Router Icon">
+        <img src="generated/images/marketing/concept-icons/router.png" alt="Icono de Router">
       </div>
       <div>
         <h3 class="l-space-left-3">ROUTER</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Router Icon (png) - <a href="generated/images/marketing/concept-icons/router.png" download>Download</a></span>
+            <span>Icono de Router (png) - <a href="generated/images/marketing/concept-icons/router.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Router Icon (svg) - <a href="generated/images/marketing/concept-icons/router.svg" download>Download</a></span>
+            <span>Icono de Router (svg) - <a href="generated/images/marketing/concept-icons/router.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -393,16 +433,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/universal.png" alt="Universal Icon">
+        <img src="generated/images/marketing/concept-icons/universal.png" alt="Icono Universal">
       </div>
       <div>
         <h3 class="l-space-left-3">UNIVERSAL</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Universal Icon (png) - <a href="generated/images/marketing/concept-icons/universal.png" download>Download</a></span>
+            <span>Icono Universal (png) - <a href="generated/images/marketing/concept-icons/universal.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Universal Icon (svg) - <a href="generated/images/marketing/concept-icons/universal.svg" download>Download</a></span>
+            <span>Icono Universal (svg) - <a href="generated/images/marketing/concept-icons/universal.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -412,7 +454,7 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div>
-        <h2>CONCEPT & FEATURE ICONS</h2>
+        <h2>ICONOS DE CONCEPTO Y CARACTERÍSTICAS</h2>
       </div>
     </div>
   </div>
@@ -420,16 +462,19 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/dependency-injection.png" alt="Dependency Injection Icon">
+        <img src="generated/images/marketing/concept-icons/dependency-injection.png"
+          alt="Icono de inyección de dependencia">
       </div>
       <div>
-        <h3 class="l-space-left-3">DEPENDENCY INJECTION</h3>
+        <h3 class="l-space-left-3">INYECCIÓN DE DEPENDENCIA</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Dependency Injection Icon (png) - <a href="generated/images/marketing/concept-icons/dependency-injection.png" download>Download</a></span>
+            <span>Icono de inyección de dependencia (png) - <a
+                href="generated/images/marketing/concept-icons/dependency-injection.png" download>Descargar</a></span>
           </li>
           <li>
-            <span>Dependency Injection Icon (svg) - <a href="generated/images/marketing/concept-icons/dependency-injection.svg" download>Download</a></span>
+            <span>Icono de inyección de dependencia (svg) - <a
+                href="generated/images/marketing/concept-icons/dependency-injection.svg" download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -439,16 +484,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/lazy-loading.png" alt="Lazy Loading Icon">
+        <img src="generated/images/marketing/concept-icons/lazy-loading.png" alt="Icono de carga diferida">
       </div>
       <div>
         <h3 class="l-space-left-3">LAZY LOADING</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Lazy Loading Icon (png) - <a href="generated/images/marketing/concept-icons/lazy-loading.png" download>Download</a></span>
+            <span>Icono de carga diferida (png) - <a href="generated/images/marketing/concept-icons/lazy-loading.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Lazy Loading Icon (svg) - <a href="generated/images/marketing/concept-icons/lazy-loading.svg" download>Download</a></span>
+            <span>Icono de carga diferida (svg) - <a href="generated/images/marketing/concept-icons/lazy-loading.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -458,16 +505,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/libraries.png" alt="Libraries Icon">
+        <img src="generated/images/marketing/concept-icons/libraries.png" alt="Icono de bibliotecas">
       </div>
       <div>
-        <h3 class="l-space-left-3">LIBRARIES</h3>
+        <h3 class="l-space-left-3">Bibliotecas</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Libraries Icon (png) - <a href="generated/images/marketing/concept-icons/libraries.png" download>Download</a></span>
+            <span>Icono de bibliotecas (png) - <a href="generated/images/marketing/concept-icons/libraries.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Libraries Icon (svg) - <a href="generated/images/marketing/concept-icons/libraries.svg" download>Download</a></span>
+            <span>Icono de bibliotecas (svg) - <a href="generated/images/marketing/concept-icons/libraries.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -477,16 +526,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/performance.png" alt="Performance Icon">
+        <img src="generated/images/marketing/concept-icons/performance.png" alt="Icono de rendimiento">
       </div>
       <div>
-        <h3 class="l-space-left-3">PERFORMANCE</h3>
+        <h3 class="l-space-left-3">RENDIMIENTO</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Performance Icon (png) - <a href="generated/images/marketing/concept-icons/performance.png" download>Download</a></span>
+            <span>Icono de rendimiento (png) - <a href="generated/images/marketing/concept-icons/performance.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Performance Icon (svg) - <a href="generated/images/marketing/concept-icons/performance.svg" download>Download</a></span>
+            <span>Icono de rendimiento (svg) - <a href="generated/images/marketing/concept-icons/performance.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -496,16 +547,18 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="generated/images/marketing/concept-icons/templates.png" alt="Templates Icon">
+        <img src="generated/images/marketing/concept-icons/templates.png" alt="Icono de plantillas">
       </div>
       <div>
-        <h3 class="l-space-left-3">TEMPLATES</h3>
+        <h3 class="l-space-left-3">PLANTILLAS</h3>
         <ul class="l-space-left-3">
           <li>
-            <span>Templates Icon (png) - <a href="generated/images/marketing/concept-icons/templates.png" download>Download</a></span>
+            <span>Icono de plantillas (png) - <a href="generated/images/marketing/concept-icons/templates.png"
+                download>Descargar</a></span>
           </li>
           <li>
-            <span>Templates Icon (svg) - <a href="generated/images/marketing/concept-icons/templates.svg" download>Download</a></span>
+            <span>Icono de plantillas (svg) - <a href="generated/images/marketing/concept-icons/templates.svg"
+                download>Descargar</a></span>
           </li>
         </ul>
       </div>
@@ -515,98 +568,113 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div>
-        <h2>PRESS AND MEDIA</h2>
-        <p>For inquiries regarding press and media please contact us at
-        <a href="mailto:press@angular.io">press@angular.io</a>.</p>
+        <h2>PRENSA Y MEDIOS </h2>
+        <p> Para consultas sobre prensa y medios, contáctenos en
+          <a href="mailto:press@angular.io">press@angular.io</a>.</p>
       </div>
     </div>
   </div>
 
   <style>
     div.bullets ul {
-      list-style-type: disc !important; margin-left: 1em !important;
+      list-style-type: disc !important;
+      margin-left: 1em !important;
     }
   </style>
 
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="bullets">
-        <h2>BRAND NAMES</h2>
-          <h3>Angular</h3>
-          <p>The name <b>Angular</b> represents the work and promises provided to you by the Angular team.</p>
+        <h2>NOMBRES DE MARCAS</h2>
+        <h3>Angular</h3>
+        <p>El Nombre <b>Angular</b> representa el trabajo y las promesas que le proporcionó el equipo de Angular.</p>
 
-          <p>When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.</p>
+        <p> Cuando no se especifica, se supone que Angular se refiere a la última y mejor versión estable del equipo de
+          Angular. </p>
+        <h4>Ejemplo</h4>
+        <p><b> Versión v4.1 ya disponible </b>: Nos complace anunciar que la última versión de Angular ya está
+          disponible. ¡Mantenerse actualizado es fácil! </p>
 
-          <h4>Example</h4>
-          <p><b>Version v4.1 now available</b> - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!</p>
+        <h4>Ejemplo</h4>
 
-          <h4>Example</h4>
+        <p><b>Correcto: </b> "Nuevo <code>*ngIf</code> capacidades</b>&mdash;nuevo en la versión 4.0 es la capacidad de
+          ..."</p>
+        <p><b style="color: red">Incorrecto: </b> "Nuevo <code>*ngIf</code> capacidades en Angular 4</b>&mdash;Angular 4
+          introduce la capacidad de ..."</p>
 
-          <p><b>Correct: </b> "New <code>*ngIf</code> capabilities</b>&mdash;new in version 4.0 is the ability to ..."</p>
-          <p><b style="color: red">Incorrect: </b> "New <code>*ngIf</code> capabilities in Angular 4</b>&mdash;Angular 4 introduces the ability to ..."</p>
+        <p><b>Razonamiento</b></p>
 
-          <p><b>Reasoning</b></p>
+        <p> Al no usar "Angular 4" en el título, el contenido aún se siente aplicable y útil después de que se hayan
+          lanzado las versiones 5, 6, 7, ya que es poco probable que la sintaxis cambie a corto y mediano plazo. </p>
 
-          <p>By not using “Angular 4” in the title, the content still feels applicable and useful after version 5, 6, 7 have been released, as the syntax is unlikely to change in the short and medium term.</p>
+        <h3>AngularJS</h3>
 
-          <h3>AngularJS</h3>
+        <p><b> AngularJS </b> es la serie v1.x de trabajo y promesas proporcionadas por el equipo de Angular. </p>
 
-          <p><b>AngularJS</b> is the v1.x series of work and promises provided by the Angular team.</p>
+        <h4>Ejemplos</h4>
+        <ol>
+          <li> AngularJS es uno de los marcos más utilizados en la web en la actualidad (por número de proyectos). </li>
+          <li> Millones de desarrolladores están construyendo actualmente con AngularJS. </li>
+          <li> Los desarrolladores están comenzando a actualizar de AngularJS a Angular. </li>
+          <li> Estoy actualizando mi aplicación de AngularJS a Angular. </li>
+          <li> Estoy usando AngularJS Material en este proyecto. </li>
+        </ol>
 
-          <h4>Examples</h4>
-          <ol>
-            <li>AngularJS is one of the most used framework on the web today (by number of projects).</li>
-            <li>Millions of developers are currently building with AngularJS.</li>
-            <li>Developers are beginning to upgrade from AngularJS to Angular.</li>
-            <li>I’m upgrading my application from AngularJS to Angular.</li>
-            <li>I'm using AngularJS Material on this project.</li>
-          </ol>
-
-          <p>AngularJS projects should use the
+        <p>Los proyectos de AngularJS deben usar el
           <a href="assets/images/logos/angularjs/AngularJS-Shield.svg" title="AngularJS logo">
-          original AngularJS logo</a> / icon, and not the Angular icon.</p>
+            logo original de AngularJS </a> / icono, y no el icono de Angular.</p>
 
-          <img src="assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;" height="128" width="128">
+        <img src="assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;"
+          height="128" width="128">
 
-          <h3>Angular Material</h3>
+        <h3>Angular Material</h3>
 
-          <p>This is the work being performed by the Angular team to provide Material Design components for Angular applications.</p>
+        <p>Este es el trabajo que está realizando el equipo de Angular para proporcionar componentes de Material Design
+          para aplicaciones Angular.</p>
 
-          <h3>AngularJS Material</h3>
+        <h3>Material de AngularJS</h3>
 
-          <p>This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.</p>
+        <p>Este es el trabajo que está realizando el equipo de Angular en los componentes de Material Design que son
+          compatibles con AngularJS.</p>
 
-          <h3>3rd Party Projects</h3>
+        <h3>Proyectos de terceros</h3>
 
-          <p><b>X for Angular</b></p>
+        <p><b>X para Angular</b></p>
 
-          <p>3rd parties should use the terminology “X for Angular” or “ng-X” for software projects. Projects should avoid the use of Angular X (e.g. Angular UI Toolkit), as it could create authorship confusion. This rule does not apply to events or meetup groups.</p>
+        <p>Los terceros deben utilizar la terminología "X para Angular" o "ng-X" para proyectos de software. Los
+          proyectos deben evitar el uso de Angular X (por ejemplo, Angular UI Toolkit), ya que podría crear confusión en
+          la autoría. Esta regla no se aplica a eventos o grupos de reuniones.</p>
 
-          <p>Developers should avoid using Angular version numbers in project names, as this will artificially limit their projects by tying them to a point in time of Angular, or will require renaming over time.</p>
+        <p>Los desarrolladores deben evitar el uso de números de versión de Angular en los nombres de los proyectos, ya
+          que esto limitará artificialmente sus proyectos al vincularlos a un punto en el tiempo de Angular, o requerirá
+          un cambio de nombre con el tiempo.</p>
 
-          <p>Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.</p>
+        <p>Cuando se usa un nombre en clave o un nombre abreviado, como en npm o github, algunos son aceptables, otros
+          no.</p>
 
-          <b>Do not use</b>
-          <ul>
-            <li><code>ng2-</code></li>
-            <li><code>angular2-</code></li>
-          </ul>
+        <b>No utilices</b>
+        <ul>
+          <li><code>ng2-</code></li>
+          <li><code>angular2-</code></li>
+        </ul>
 
-          <b>OK to use</b>
-          <ul>
-            <li><code>ng-</code></li>
-            <li><code>angular-</code></li>
-          </ul>
+        <b>Bien para usar</b>
+        <ul>
+          <li><code>ng-</code></li>
+          <li><code>angular-</code></li>
+        </ul>
 
-          <p>As always, component and directive selectors should not begin with “ng-” selectors as this will conflict with components and directives provided by the Angular team.</p>
+        <p>Como siempre, los selectores de componentes y directivas no deben comenzar con selectores "ng-", ya que esto
+          entrará en conflicto con los componentes y las directivas proporcionadas por el equipo de Angular.</p>
 
-          <h4>Examples</h4>
-          <ul>
-            <li>The ng-BE team just launched <code>ng-health</code> to help developers track their own health.</li>
-            <li>I’m going to use NativeScript for Angular to take advantage of native UI widgets.</li>
-            <li><code>ReallyCoolTool</code> for Angular.</li>
-            <li><code>ReallyCoolTool</code> for AngularJS.</li>
-          </ul>
+        <h4>Ejemplos</h4>
+        <ul>
+          <li>El equipo ng-BE acaba de lanzar <code>ng-health</code> Para ayudar a los desarrolladores a rastrear su
+            propia salud.</li>
+          <li>Voy a usar NativeScript para Angular para aprovechar los widgets de IU nativos.</li>
+          <li><code>ReallyCoolTool</code> para Angular.</li>
+          <li><code>ReallyCoolTool</code> para AngularJS.</li>
+        </ul>
       </div>
     </div>
   </div>
@@ -614,10 +682,10 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="bullets">
-        <h2>TERMS WE USE</h2>
+        <h2>TÉRMINOS QUE UTILIZAMOS</h2>
         <p>
-        We often use terms that are not part of our brand,
-        but we want to remain consistent on the styling and use of them to prevent confusion and to appear unified.
+          A menudo utilizamos términos que no forman parte de nuestra marca,
+          pero queremos ser consistentes en el estilo y el uso de ellos para evitar confusiones y parecer unificados.
         </p>
         <ul>
           <li>Ahead of Time compilation (AOT)</li>
@@ -626,4 +694,4 @@
       </div>
     </div>
   </div>
-</article>
+</article>
\ No newline at end of file
diff --git a/aio/content/tutorial/toh-pt2.en.md b/aio/content/tutorial/toh-pt2.en.md
new file mode 100644
index 0000000000..ce094dac3f
--- /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 ce094dac3f..1f33bfba34 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, consulta 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.
+Crea un archivo llamado `mock-heroes.ts` en la carpeta `src/app/`.
+Define la constante `HEROES` como un conjunto de 10 héroes y expórtala.
+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éroes
 
-Open the `HeroesComponent` class file and import the mock `HEROES`.
+Abre 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`), define 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:
+Abre las Plantillas `HeroesComponent` y realiza 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).
+* Agrega `<h2>` al principio
+* Agrega una lista HTML desordenada (`<ul>`) debajo de ella
+* Inserta `<li>` dentro del `<ul>` que muestra la propiedad `hero`
+* Espolvoreé 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, agrega `*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/built-in-directives#ngFor) es la directiva de _repetición_ de Angular.
 
-The syntax in this example is as follows:
+Esto repite el elemento host para cada elemento de la lista.
 
-* `<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.
+La sintaxis para este ejemplo es:
+
+* `<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 olvides 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
 
-The heroes list should be attractive and should respond visually when users
-hover over and select a hero from the list.
+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.
 
-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.
+En el [Primer tutorial](tutorial/toh-pt0#app-wide-styles), configuro el estilo básico de toda la aplicación en `styles.css`.
 
-You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
+No incluí el estilo de la lista de héroes en esta hoja de estilo.
 
-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.
+Puedes agregar más estilos a `styles.css` y seguir expandiendo esa hoja de estilo a medida que agrega componentes
 
-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.
+Es posible que prefieras 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 define private styles either inline in the `@Component.styles` array or
-as stylesheet file(s) identified in the `@Component.styleUrls` array.
+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.
 
-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.
+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.
+
+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.
+Abre `heroes.component.css` y pega el estilo privado para `HeroesComponent`.
+Puedes 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 actualiza 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:
+Agrega 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.
+Este es un ejemplo de la sintaxis de Angular [enlace de eventos](guide/event-binding) .
 
-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)`.
 
+En la siguiente sección, definiremos el método `onSelect()` en el `HeroesComponent` para mostrar los héroes definidos por las expresiones `*ngFor`.
 
-In the next section, define an `onSelect()` method in `HeroesComponent` to
-display the hero that was defined in the `*ngFor` expression.
+### Agregar un controlador de eventos de clic
 
+Cambia el nombre de la propiedad `hero` del componente a `selectedHero`, pero no la asignes todavía.
+No hay _héroe seleccionado_ cuando se inicia la aplicación.
 
-### 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`.
+Agrega 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.
+Agrega 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:
+Abre y busca las herramientas de desarrollador de su navegador y busca 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.
 
+Adjunta los detalles del héroe en HTML `<div>`.
+Agrega 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 olvides 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.
+Actualiza su navegador y verá la lista de nombres nuevamente.
+El área de detalles está en blanco.
+Hace 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/attribute-binding#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:
+Agrega 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`