docs: translate tutorial/toh-pt1.md (#278)

Closes #74

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.
+
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
+
+## Create the heroes component
+
+Using the Angular CLI, generate a new component named `heroes`.
+
+<code-example language="sh" class="code-shell">
+  ng generate component heroes
+</code-example>
+
+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:
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" header="app/heroes/heroes.component.ts (initial version)"></code-example>
+
+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`&mdash; the component's CSS element selector
+1. `templateUrl`&mdash; the location of the component's template file.
+1. `styleUrls`&mdash; 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."
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" header="heroes.component.ts (hero property)"></code-example>
+
+### 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.
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" header="heroes.component.html" region="show-hero-1"></code-example>
+
+## 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 `<app-heroes>` element to the `AppComponent` template file, just below the title.
+
+<code-example path="toh-pt1/src/app/app.component.html" header="src/app/app.component.html"></code-example>
+
+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.
+
+<code-example path="toh-pt1/src/app/hero.ts"  header="src/app/hero.ts"></code-example>
+
+
+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:
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts"></code-example>
+
+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:
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="show-hero-2" header="heroes.component.html (HeroesComponent's template)"></code-example>
+
+The browser refreshes and displays the hero's information.
+
+## Format with the _UppercasePipe_
+
+Modify the `hero.name` binding like this.
+<code-example path="toh-pt1/src/app/heroes/heroes.component.html" header="src/app/heroes/heroes.component.html" region="pipe">
+</code-example>
+
+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 `<input>` 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 `<input>` form element and the `hero.name` property.
+
+### Two-way binding
+
+Refactor the details area in the `HeroesComponent` template so it looks like this:
+
+<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" header="src/app/heroes/heroes.component.html (HeroesComponent's template)"></code-example>
+
+**[(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
+
+<code-example language="sh" class="code-shell">
+Template parse errors:
+Can't bind to 'ngModel' since it isn't a known property of 'input'.
+</code-example>
+
+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.
+
+<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (FormsModule symbol import)"
+ region="formsmodule-js-import">
+</code-example>
+
+Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.
+
+<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (@NgModule imports)"
+region="ng-imports">
+</code-example>
+
+When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` 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.
+<code-example path="toh-pt1/src/app/app.module.ts" header="src/app/app.module.ts" region="heroes-import" >
+</code-example>
+
+The `HeroesComponent` is declared in the `@NgModule.declarations` array.
+<code-example path="toh-pt1/src/app/app.module.ts" header="src/app/app.module.ts" region="declarations">
+</code-example>
+
+Note that `AppModule`  declares both application components, `AppComponent` and `HeroesComponent`.
+
+
+## Final code review
+
+Here are the code files discussed on this page.
+
+<code-tabs>
+
+  <code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt1/src/app/heroes/heroes.component.ts">
+  </code-pane>
+
+  <code-pane header="src/app/heroes/heroes.component.html" path="toh-pt1/src/app/heroes/heroes.component.html">
+  </code-pane>
+
+  <code-pane header="src/app/app.module.ts"
+  path="toh-pt1/src/app/app.module.ts">
+  </code-pane>
+
+  <code-pane header="src/app/app.component.ts" path="toh-pt1/src/app/app.component.ts">
+  </code-pane>
+
+  <code-pane header="src/app/app.component.html" path="toh-pt1/src/app/app.component.html">
+  </code-pane>
+
+  <code-pane header="src/app/hero.ts"
+  path="toh-pt1/src/app/hero.ts">
+  </code-pane>
+
+</code-tabs>
+
+## 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.

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.
+Se ha agregado un título básico a la aplicación.
-Next you will create a new component to display hero information
+Luego crea un nuevo componente para mostrar la información del héroe,
-and place that component in the application shell.
+Coloca el componente en el (app shell) de la aplicación.
 
 <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 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`.
 
 <code-example language="sh" class="code-shell">
   ng generate component heroes
 </code-example>
 
-The CLI creates a new folder, `src/app/heroes/`, and generates
+CLI crea una nueva carpeta llamada `src/app/heroes/`, y
-the three files of the  `HeroesComponent` along with a test file.
+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.
 
 <code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" header="app/heroes/heroes.component.ts (initial version)"></code-example>
 
-You always import the `Component` symbol from the Angular core library
+Siempre Importa el símbolo `Component` de la biblioteca pricipal de Angular, y realiza la anotación a la clase del component con `@Component`.
-and annotate the component class with `@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`&mdash; the component's CSS element selector
+1. `selector`&mdash; El selector de elementos CSS para el componente
-1. `templateUrl`&mdash; the location of the component's template file.
+1. `templateUrl`&mdash; La ubicación del archivo plantilla para el componente
-1. `styleUrls`&mdash; the location of the component's private CSS styles.
+1. `styleUrls`&mdash; 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),
+El [Selector de elementos CSS](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.
+`'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).
+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.
-Angular calls `ngOnInit()` shortly after creating a component.
+Adecuado para poner la lógica de inicialización.
-It's a good place to put initialization logic.
 
-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".
 
 <code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" header="heroes.component.ts (hero property)"></code-example>
 
-### Show the hero
+### Mostrar el héroe
 
-Open the `heroes.component.html` template file.
+Abre el archivo de plantilla `heroes.component.html`.
-Delete the default text generated by the Angular CLI and
+Elimina el texto predeterminado generado por CLI angular,
-replace it with a data binding to the new `hero` property.
+Reemplaza con un enlace de datos a la nueva propiedad `hero`.
 
 <code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" header="heroes.component.html" region="show-hero-1"></code-example>
 
-## 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`.
+Recuerda que `app-heroes` es el [selector de elemento](#selector) del `HeroesComponent`.
-So add an `<app-heroes>` element to the `AppComponent` template file, just below the title.
+Entonces, en el archivo Plantillas de `AppComponent`, agrega el elemento `<app-heroes>` directamente debajo del título.
 
 <code-example path="toh-pt1/src/app/app.component.html" header="src/app/app.component.html"></code-example>
 
-Assuming that the CLI `ng serve` command is still running,
+Si el comando CLI `ng serve` todavía se está ejecutando,
-the browser should refresh and display both the application title and the hero name.
+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.
+Crea una interfaz `Hero` en su propio archivo en la carpeta `src/app`.
-Give it `id` and `name` properties.
+Dale una propiedad `id` y una propiedad `name`.
 
 <code-example path="toh-pt1/src/app/hero.ts"  header="src/app/hero.ts"></code-example>
 
 
-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`.
+Refactoriza la propiedad de héroe del componente para que sea del tipo 'Héroe'.
-Initialize it with an `id` of `1` and the name `Windstorm`.
+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í:
 
 <code-example path="toh-pt1/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts"></code-example>
 
-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
+Actualiza los enlaces de Plantillas para anunciar el nombre del héroe,
-and show both `id` and `name` in a details layout like this:
+Muestra tanto el `id` como el `name` con un diseño detallado como este:
 
 <code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="show-hero-2" header="heroes.component.html (HeroesComponent's template)"></code-example>
 
-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:
 <code-example path="toh-pt1/src/app/heroes/heroes.component.html" header="src/app/heroes/heroes.component.html" region="pipe">
 </code-example>
 
-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,
+En el enlace de interpolación, la palabra `mayúscula` inmediatamente después del operador pipe (|) es
-right after the pipe operator ( | ),
+Inicie el 'UppercasePipe' incorporado.
-activates the built-in `UppercasePipe`.
 
-[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data.
+[pipe](guide/pipes) ("pipe") Es adecuado para formatear cadenas, importes monetarios, fechas y otros datos de visualización.
-Angular ships with several built-in pipes and you can create your own.
+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 `<input>` textbox.
+El usuario debe poder editar el nombre del héroe en el cuadro de texto `<input>`.
 
-The textbox should both _display_ the hero's `name` property
+En el cuadro de texto, la propiedad `name` del héroe se muestra _,
-and _update_ that property as the user types.
+La propiedad se actualiza según los tipos de usuario.
-That means data flows from the component class _out to the screen_ and
+Esto es de la clase de componente a _screen_,
-from the screen _back to the class_.
+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 `<input>` form element and the `hero.name` property.
+Para automatizar ese flujo de datos, configure un enlace de datos bidireccional entre el elemento de formulario `<input>` 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í:
 
 <code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" header="src/app/heroes/heroes.component.html (HeroesComponent's template)"></code-example>
 
-**[(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
+Para ver el error, abre las herramientas de desarrollo de su navegador,
-for a message like
+Busca mensajes como el siguiente en la consola,
 
 <code-example language="sh" class="code-shell">
-Template parse errors:
+Errores de análisis de plantilla:
-Can't bind to 'ngModel' since it isn't a known property of 'input'.
+No se puede vincular a 'nGModelo' ya que no es una propiedad conocida de 'entrada'.
 </code-example>
 
-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
+En Angular, cómo encajan las partes de la aplicación,
-and what other files and libraries the app requires.
+Necesita saber qué otros archivos y bibliotecas necesita su aplicación.
-This information is called _metadata_.
+Esta información se llama _metadata_.
 
-Some of the metadata is in the `@Component` decorators that you added to your component classes.
+Algunos de los metadatos se encuentran en el decorador `@Component` que agregó a su clase de componentes.
-Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators.
+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.
+Angular CLI creó la clase `AppModule` en `src/app/app.module.ts` al crear el proyecto.
-This is where you _opt-in_ to the `FormsModule`.
+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`.
 
-<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (FormsModule symbol import)"
+<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (@NgModule imports)"
  region="formsmodule-js-import">
 </code-example>
 
-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.
 
 <code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts ( @NgModule imports)"
 region="ng-imports">
 </code-example>
 
-When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` 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 `<h2>` 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`.
+_No has declarado_ HeroesComponent`.
-So why did the application work?
+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.
 <code-example path="toh-pt1/src/app/app.module.ts" header="src/app/app.module.ts" region="heroes-import" >
 </code-example>
 
-The `HeroesComponent` is declared in the `@NgModule.declarations` array.
+`HeroesComponent` se declara en la matriz`@NgModule.declarations`.
 <code-example path="toh-pt1/src/app/app.module.ts" header="src/app/app.module.ts" region="declarations">
 </code-example>
 
-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
+Los archivos de código descritos en esta página son:
-
-Here are the code files discussed on this page.
 
 <code-tabs>
 
@@ -232,14 +232,12 @@ Here are the code files discussed on this page.
   </code-pane>
 
 </code-tabs>
+## Resumen
 
-## Summary
+* Creo un segundo `HeroesComponent` usando el CLI.
-
+* Agregó `HeroesComponent` al shell de `AppComponent` y lo mostró.
-* You used the CLI to create a second `HeroesComponent`.
+* Aplico 'UppercasePipe' para formatear el nombre.
-* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell.
+* Utilizo el enlace de datos bidireccional en la directiva `ngModel`.
-* You applied the `UppercasePipe` to format the name.
+* Aprendío sobre `AppModule`.
-* You used two-way data binding with the `ngModel` directive.
+* Importó `FormsModule` en `AppModule` para reconocer y aplicar la directiva Angular `ngModel`.
-* You learned about the `AppModule`.
+* 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.
-* 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.