diff --git a/aio/content/tutorial/toh-pt1.en.md b/aio/content/tutorial/toh-pt1.en.md
new file mode 100644
index 0000000000..777105a2ba
--- /dev/null
+++ b/aio/content/tutorial/toh-pt1.en.md
@@ -0,0 +1,245 @@
+# The hero editor
+
+The application now has a basic title.
+Next you will create a new component to display hero information
+and place that component in the application shell.
+
+
+
+ For the sample app that this page describes, see the .
+
+
+
+## Create the heroes component
+
+Using the Angular CLI, generate a new component named `heroes`.
+
+
+ ng generate component heroes
+
+
+The CLI creates a new folder, `src/app/heroes/`, and generates
+the three files of the `HeroesComponent` along with a test file.
+
+The `HeroesComponent` class file is as follows:
+
+
+
+You always import the `Component` symbol from the Angular core library
+and annotate the component class with `@Component`.
+
+`@Component` is a decorator function that specifies the Angular metadata for the component.
+
+The CLI generated three metadata properties:
+
+1. `selector`— the component's CSS element selector
+1. `templateUrl`— the location of the component's template file.
+1. `styleUrls`— the location of the component's private CSS styles.
+
+{@a selector}
+
+The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors),
+`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template.
+
+The `ngOnInit()` is a [lifecycle hook](guide/lifecycle-hooks#oninit).
+Angular calls `ngOnInit()` shortly after creating a component.
+It's a good place to put initialization logic.
+
+Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`.
+
+### Add a `hero` property
+
+Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm."
+
+
+
+### Show the hero
+
+Open the `heroes.component.html` template file.
+Delete the default text generated by the Angular CLI and
+replace it with a data binding to the new `hero` property.
+
+
+
+## Show the `HeroesComponent` view
+
+To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`.
+
+Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`.
+So add an `` element to the `AppComponent` template file, just below the title.
+
+
+
+Assuming that the CLI `ng serve` command is still running,
+the browser should refresh and display both the application title and the hero name.
+
+## Create a Hero interface
+
+A real hero is more than a name.
+
+Create a `Hero` interface in its own file in the `src/app` folder.
+Give it `id` and `name` properties.
+
+
+
+
+Return to the `HeroesComponent` class and import the `Hero` interface.
+
+Refactor the component's `hero` property to be of type `Hero`.
+Initialize it with an `id` of `1` and the name `Windstorm`.
+
+The revised `HeroesComponent` class file should look like this:
+
+
+
+The page no longer displays properly because you changed the hero from a string to an object.
+
+## Show the hero object
+
+Update the binding in the template to announce the hero's name
+and show both `id` and `name` in a details layout like this:
+
+
+
+The browser refreshes and displays the hero's information.
+
+## Format with the _UppercasePipe_
+
+Modify the `hero.name` binding like this.
+
+
+
+The browser refreshes and now the hero's name is displayed in capital letters.
+
+The word `uppercase` in the interpolation binding,
+right after the pipe operator ( | ),
+activates the built-in `UppercasePipe`.
+
+[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data.
+Angular ships with several built-in pipes and you can create your own.
+
+## Edit the hero
+
+Users should be able to edit the hero name in an `` textbox.
+
+The textbox should both _display_ the hero's `name` property
+and _update_ that property as the user types.
+That means data flows from the component class _out to the screen_ and
+from the screen _back to the class_.
+
+To automate that data flow, setup a two-way data binding between the `` form element and the `hero.name` property.
+
+### Two-way binding
+
+Refactor the details area in the `HeroesComponent` template so it looks like this:
+
+
+
+**[(ngModel)]** is Angular's two-way data binding syntax.
+
+Here it binds the `hero.name` property to the HTML textbox so that data can flow _in both directions:_ from the `hero.name` property to the textbox, and from the textbox back to the `hero.name`.
+
+### The missing _FormsModule_
+
+Notice that the app stopped working when you added `[(ngModel)]`.
+
+To see the error, open the browser development tools and look in the console
+for a message like
+
+
+Template parse errors:
+Can't bind to 'ngModel' since it isn't a known property of 'input'.
+
+
+Although `ngModel` is a valid Angular directive, it isn't available by default.
+
+It belongs to the optional `FormsModule` and you must _opt-in_ to using it.
+
+## _AppModule_
+
+Angular needs to know how the pieces of your application fit together
+and what other files and libraries the app requires.
+This information is called _metadata_.
+
+Some of the metadata is in the `@Component` decorators that you added to your component classes.
+Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators.
+
+The most important `@NgModule` decorator annotates the top-level **AppModule** class.
+
+The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project.
+This is where you _opt-in_ to the `FormsModule`.
+
+### Import _FormsModule_
+
+Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library.
+
+
+
+
+Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.
+
+
+
+
+When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `
` above the textbox.
+
+### Declare `HeroesComponent`
+
+Every component must be declared in _exactly one_ [NgModule](guide/ngmodules).
+
+_You_ didn't declare the `HeroesComponent`.
+So why did the application work?
+
+It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component.
+
+Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top.
+
+
+
+The `HeroesComponent` is declared in the `@NgModule.declarations` array.
+
+
+
+Note that `AppModule` declares both application components, `AppComponent` and `HeroesComponent`.
+
+
+## Final code review
+
+Here are the code files discussed on this page.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Summary
+
+* You used the CLI to create a second `HeroesComponent`.
+* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell.
+* You applied the `UppercasePipe` to format the name.
+* You used two-way data binding with the `ngModel` directive.
+* You learned about the `AppModule`.
+* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive.
+* You learned the importance of declaring components in the `AppModule`
+and appreciated that the CLI declared it for you.
diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md
index 777105a2ba..12754c16a2 100644
--- a/aio/content/tutorial/toh-pt1.md
+++ b/aio/content/tutorial/toh-pt1.md
@@ -1,213 +1,213 @@
-# The hero editor
+# El editor de Héroe
-The application now has a basic title.
-Next you will create a new component to display hero information
-and place that component in the application shell.
+Se ha agregado un título básico a la aplicación.
+Luego crea un nuevo componente para mostrar la información del héroe,
+Coloca el componente en el (app shell) de la aplicación.
- For the sample app that this page describes, see the .
+ Para ver la aplicación de ejemplo que describe esta página, consulta el .
-## Create the heroes component
+## Crear un componente de héroes
-Using the Angular CLI, generate a new component named `heroes`.
+Usa la CLI angular para generar un nuevo componente llamado `heroes`.
ng generate component heroes
-The CLI creates a new folder, `src/app/heroes/`, and generates
-the three files of the `HeroesComponent` along with a test file.
+CLI crea una nueva carpeta llamada `src/app/heroes/`, y
+genera tres archivos sobre `HeroesComponent` junto un archivo de prueba.
-The `HeroesComponent` class file is as follows:
+El archivo de la clase `HeroesComponent` es el siguiente.
-You always import the `Component` symbol from the Angular core library
-and annotate the component class with `@Component`.
+Siempre Importa el símbolo `Component` de la biblioteca pricipal de Angular, y realiza la anotación a la clase del component con `@Component`.
-`@Component` is a decorator function that specifies the Angular metadata for the component.
+`@Component` es una decoradoro que especifica metadatos Angular para un
+componente.
-The CLI generated three metadata properties:
+La CLI generó 3 propiedades de metadatos:
-1. `selector`— the component's CSS element selector
-1. `templateUrl`— the location of the component's template file.
-1. `styleUrls`— the location of the component's private CSS styles.
+1. `selector`— El selector de elementos CSS para el componente
+1. `templateUrl`— La ubicación del archivo plantilla para el componente
+1. `styleUrls`— La ubicación de los estilos CSS privados del componente.
{@a selector}
-The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors),
-`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template.
+El [Selector de elementos CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors)
+`'app-heroes'`, coincide con el nombre del elemento HTML que identifica este componente en el componente padre Plantillas.
-The `ngOnInit()` is a [lifecycle hook](guide/lifecycle-hooks#oninit).
-Angular calls `ngOnInit()` shortly after creating a component.
-It's a good place to put initialization logic.
+El `ngOnInit()` es un [gancho de ciclo de vida](guide/lifecycle-hooks#oninit) ("lifecycle hook") . Angular llama a `ngOnInit()` inmediatamente después de crear el componente.
+Adecuado para poner la lógica de inicialización.
-Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`.
+Siempre `exporta` la clase de componente, por lo que siempre puede `importarla` en otro lugar, como un `AppModule`.
-### Add a `hero` property
+### Agrega la propiedad `hero`
-Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm."
+Agrega una propiedad `hero` al `HeroesComponent` para un héroe llamado "Windstorm".
-### Show the hero
+### Mostrar el héroe
-Open the `heroes.component.html` template file.
-Delete the default text generated by the Angular CLI and
-replace it with a data binding to the new `hero` property.
+Abre el archivo de plantilla `heroes.component.html`.
+Elimina el texto predeterminado generado por CLI angular,
+Reemplaza con un enlace de datos a la nueva propiedad `hero`.
-## Show the `HeroesComponent` view
+## Mostrar la vista `HeroesComponent`
-To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`.
+Para ver el `HeroesComponent`, debe agregarlo a las Plantillas en el `AppComponent` del shell de tu aplicación.
-Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`.
-So add an `` element to the `AppComponent` template file, just below the title.
+Recuerda que `app-heroes` es el [selector de elemento](#selector) del `HeroesComponent`.
+Entonces, en el archivo Plantillas de `AppComponent`, agrega el elemento `` directamente debajo del título.
-Assuming that the CLI `ng serve` command is still running,
-the browser should refresh and display both the application title and the hero name.
+Si el comando CLI `ng serve` todavía se está ejecutando,
+El navegador se actualiza para mostrar el título de la aplicación y el nombre del héroe.
-## Create a Hero interface
+## Crear interfaz de héroe
-A real hero is more than a name.
+Un héroe es más que un nombre.
-Create a `Hero` interface in its own file in the `src/app` folder.
-Give it `id` and `name` properties.
+Crea una interfaz `Hero` en su propio archivo en la carpeta `src/app`.
+Dale una propiedad `id` y una propiedad `name`.
-Return to the `HeroesComponent` class and import the `Hero` interface.
+Regresa a la clase `HeroesComponent` e importe la interfaz `Hero`.
-Refactor the component's `hero` property to be of type `Hero`.
-Initialize it with an `id` of `1` and the name `Windstorm`.
+Refactoriza la propiedad de héroe del componente para que sea del tipo 'Héroe'.
+Inicialízalo con un `id` de `1` y un nombre de `Windstorm`.
-The revised `HeroesComponent` class file should look like this:
+El archivo de clase revisado `HeroesComponent` se ve así:
-The page no longer displays properly because you changed the hero from a string to an object.
+Cambió el héroe de texto a un objeto, lo que provocó que la página se mostrara incorrectamente.
-## Show the hero object
+## Mostrar objeto de héroe
-Update the binding in the template to announce the hero's name
-and show both `id` and `name` in a details layout like this:
+Actualiza los enlaces de Plantillas para anunciar el nombre del héroe,
+Muestra tanto el `id` como el `name` con un diseño detallado como este:
-The browser refreshes and displays the hero's information.
+El navegador se actualiza para mostrar la información del héroe.
-## Format with the _UppercasePipe_
+## Formatea con _UppercasePipe_
-Modify the `hero.name` binding like this.
+Modifica el enlace para `hero.name` de esta manera:
-The browser refreshes and now the hero's name is displayed in capital letters.
+El navegador se actualizará para mostrar el nombre del héroe en mayúsculas.
-The word `uppercase` in the interpolation binding,
-right after the pipe operator ( | ),
-activates the built-in `UppercasePipe`.
+En el enlace de interpolación, la palabra `mayúscula` inmediatamente después del operador pipe (|) es
+Inicie el 'UppercasePipe' incorporado.
-[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data.
-Angular ships with several built-in pipes and you can create your own.
+[pipe](guide/pipes) ("pipe") Es adecuado para formatear cadenas, importes monetarios, fechas y otros datos de visualización.
+Angular viene con múltiples pipes incorporadas, y puede crear las suyas propias.
-## Edit the hero
+## Editar el héroe
-Users should be able to edit the hero name in an `` textbox.
+El usuario debe poder editar el nombre del héroe en el cuadro de texto ``.
-The textbox should both _display_ the hero's `name` property
-and _update_ that property as the user types.
-That means data flows from the component class _out to the screen_ and
-from the screen _back to the class_.
+En el cuadro de texto, la propiedad `name` del héroe se muestra _,
+La propiedad se actualiza según los tipos de usuario.
+Esto es de la clase de componente a _screen_,
+Y significa el flujo de datos desde la pantalla a la clase de componente.
-To automate that data flow, setup a two-way data binding between the `` form element and the `hero.name` property.
+Para automatizar ese flujo de datos, configure un enlace de datos bidireccional entre el elemento de formulario `` y la propiedad `hero.name`.
-### Two-way binding
+### Enlace de datos bidireccional
-Refactor the details area in the `HeroesComponent` template so it looks like this:
+Refactorizando el área de detalle de las Plantas `HeroesComponent` se ve así:
-**[(ngModel)]** is Angular's two-way data binding syntax.
+**[(ngModel)]** Es la sintaxis de enlace de datos bidireccional de Angular.
-Here it binds the `hero.name` property to the HTML textbox so that data can flow _in both directions:_ from the `hero.name` property to the textbox, and from the textbox back to the `hero.name`.
+Esto vinculará la propiedad `hero.name` al cuadro de texto HTML, por lo que
+Puede pasar datos _en ambas direcciones_ desde la propiedad `hero.name` al cuadro de texto y desde el cuadro de texto a la propiedad `hero.name`.
-### The missing _FormsModule_
+### _FormsModule_ No encontrado
-Notice that the app stopped working when you added `[(ngModel)]`.
+Observa que la aplicación dejó de funcionar cuando agregué el `[(ngModel)]`.
-To see the error, open the browser development tools and look in the console
-for a message like
+Para ver el error, abre las herramientas de desarrollo de su navegador,
+Busca mensajes como el siguiente en la consola,
-Template parse errors:
-Can't bind to 'ngModel' since it isn't a known property of 'input'.
+Errores de análisis de plantilla:
+No se puede vincular a 'nGModelo' ya que no es una propiedad conocida de 'entrada'.
-Although `ngModel` is a valid Angular directive, it isn't available by default.
+`ngModel` Es una directiva angular válida pero no está disponible por defecto.
-It belongs to the optional `FormsModule` and you must _opt-in_ to using it.
+Pertenece al `FormsModule` opcional y debe optar por ese módulo para usarlo.
## _AppModule_
-Angular needs to know how the pieces of your application fit together
-and what other files and libraries the app requires.
-This information is called _metadata_.
+En Angular, cómo encajan las partes de la aplicación,
+Necesita saber qué otros archivos y bibliotecas necesita su aplicación.
+Esta información se llama _metadata_.
-Some of the metadata is in the `@Component` decorators that you added to your component classes.
-Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators.
+Algunos de los metadatos se encuentran en el decorador `@Component` que agregó a su clase de componentes.
+Otros metadatos importantes son[`@NgModule`](guide/ngmodules)Está en el decorador.
-The most important `@NgModule` decorator annotates the top-level **AppModule** class.
+El decorador más importante `@NgModule` anota la clase **AppModule** de nivel superior.
-The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project.
-This is where you _opt-in_ to the `FormsModule`.
+Angular CLI creó la clase `AppModule` en `src/app/app.module.ts` al crear el proyecto.
+Ahora opta por el `FormsModule`.
-### Import _FormsModule_
+### Importar _FormsModule_
-Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library.
+Abre `AppModule` (`app.module.ts`) e importe el símbolo `FormsModule` desde la biblioteca `@angular/forms`.
-
-Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.
+A continuación, agregue el `FormsModule` a el arreglo `imports` de los metadatos `@ NgModule`.
+Esta matriz contiene una lista de módulos externos que requiere su aplicación.
-
-When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `
` above the textbox.
+La aplicación debería funcionar nuevamente cuando se actualice el navegador. Puedes editar el nombre del héroe y ver los cambios reflejados inmediatamente en el `
` arriba del cuadro de texto.
-### Declare `HeroesComponent`
+### Declarar `HeroesComponent`
-Every component must be declared in _exactly one_ [NgModule](guide/ngmodules).
+Todos los componentes deben declararse con _exactamente uno_ [NgModule](guide/ngmodules).
-_You_ didn't declare the `HeroesComponent`.
-So why did the application work?
+_No has declarado_ HeroesComponent`.
+Entonces, ¿por qué funcionó la aplicación?
-It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component.
+La aplicación funcionó porque Angular CLI declaró el componente en el `AppModule` cuando generó el `HeroesComponent`.
+
+Abra `src/app/app.module.ts` y encuentre el `HeroesComponent` importado cerca de la parte superior.
-Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top.
-The `HeroesComponent` is declared in the `@NgModule.declarations` array.
+`HeroesComponent` se declara en la matriz`@NgModule.declarations`.
-Note that `AppModule` declares both application components, `AppComponent` and `HeroesComponent`.
+`AppModule` declara los componentes de aplicación `AppComponent` y `HeroesComponent`.
+## Revisión del código final
-## Final code review
-
-Here are the code files discussed on this page.
+Los archivos de código descritos en esta página son:
@@ -217,7 +217,7 @@ Here are the code files discussed on this page.
-
@@ -232,14 +232,12 @@ Here are the code files discussed on this page.
+## Resumen
-## Summary
-
-* You used the CLI to create a second `HeroesComponent`.
-* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell.
-* You applied the `UppercasePipe` to format the name.
-* You used two-way data binding with the `ngModel` directive.
-* You learned about the `AppModule`.
-* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive.
-* You learned the importance of declaring components in the `AppModule`
-and appreciated that the CLI declared it for you.
+* Creo un segundo `HeroesComponent` usando el CLI.
+* Agregó `HeroesComponent` al shell de `AppComponent` y lo mostró.
+* Aplico 'UppercasePipe' para formatear el nombre.
+* Utilizo el enlace de datos bidireccional en la directiva `ngModel`.
+* Aprendío sobre `AppModule`.
+* Importó `FormsModule` en `AppModule` para reconocer y aplicar la directiva Angular `ngModel`.
+* Aprendío la importancia de declarar un componente en un `AppModule` y me di cuenta de que la CLI está haciendo esa declaración por usted.