-
ANGULAR LOGO
+LOGO DE ANGULAR
- 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 CC BY 4.0. - 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.
-We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.
+Te pedimos que no utilices el resto de los gráficos del sitio en otros contextos para evitar confusiones.
-
@@ -44,13 +47,15 @@
FULL COLOR LOGO
+LOGOTIPO A TODO COLOR
-
@@ -61,17 +66,20 @@
ONE COLOR LOGO
+LOGOTIPO DE UN COLOR
- 
+
+
-
@@ -81,7 +89,7 @@
ONE COLOR INVERSE LOGO
+LOGOTIPO INVERSO DE UN COLOR
-
BRAND ICONS
+ICONOS DE MARCA
- 
+
+
-
@@ -108,16 +118,18 @@
ANIMATIONS
+ANIMACIONES
- 
+
+
AUGURY
+ 
- 
+ 
+
-
@@ -165,16 +202,18 @@
CLI
+COMPILADOR
-
+ 
+
-
@@ -184,16 +223,18 @@
COMPILER
+COMPONENTES WEB
-
+ 
+
-
@@ -203,35 +244,18 @@
-
- WEB COMPONENTS
+FORMULARIOS
-
-
@@ -241,16 +265,18 @@
@@ -260,16 +286,18 @@
@@ -279,16 +307,18 @@
@@ -298,16 +328,18 @@
@@ -317,16 +349,18 @@
@@ -336,16 +370,18 @@
@@ -355,16 +391,18 @@
@@ -374,16 +412,18 @@
@@ -393,16 +433,18 @@
@@ -412,7 +454,7 @@
@@ -420,16 +462,19 @@
@@ -458,16 +505,18 @@
@@ -614,10 +682,10 @@
-
+
\ 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.
+
+
+
+
+In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding.
+
+
+
+
+### List heroes with `*ngFor`
+
+Open the `HeroesComponent` template file and make the following changes:
+
+* Add an `` at the top,
+* Below it add an HTML unordered list (`
- 
+
+
HTTP
- 
+
+
i18n
- 
+
+
KARMA
- 
+
+
LABS
- 
+
+
LANGUAGE SERVICES
- 
+
+
MATERIAL
- 
+
+
PROTRACTOR
- 
+
+
PWA
- 
+
+
ROUTER
- 
+
+
UNIVERSAL
-
CONCEPT & FEATURE ICONS
+ICONOS DE CONCEPTO Y CARACTERÍSTICAS
- 
+
+
-
@@ -439,16 +484,18 @@
DEPENDENCY INJECTION
+INYECCIÓN DE DEPENDENCIA
- 
+
+
LAZY LOADING
- 
+
+
-
@@ -477,16 +526,18 @@
LIBRARIES
+Bibliotecas
- 
+
+
-
@@ -496,16 +547,18 @@
PERFORMANCE
+RENDIMIENTO
- 
+
+
-
@@ -515,98 +568,113 @@
TEMPLATES
+PLANTILLAS
-
PRESS AND MEDIA
-For inquiries regarding press and media please contact us at - press@angular.io.
+PRENSA Y MEDIOS
+Para consultas sobre prensa y medios, contáctenos en + press@angular.io.
- 
+
-
BRAND NAMES
-Angular
-The name Angular represents the work and promises provided to you by the Angular team.
+NOMBRES DE MARCAS
+Angular
+El Nombre Angular representa el trabajo y las promesas que le proporcionó el equipo de Angular.
-When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.
+Cuando no se especifica, se supone que Angular se refiere a la última y mejor versión estable del equipo de + Angular.
+Ejemplo
+Versión v4.1 ya disponible : Nos complace anunciar que la última versión de Angular ya está + disponible. ¡Mantenerse actualizado es fácil!
-Example
-Version v4.1 now available - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!
+Ejemplo
-Example
+Correcto: "Nuevo *ngIf capacidades—nuevo en la versión 4.0 es la capacidad de
+ ..."
Incorrecto: "Nuevo *ngIf capacidades en Angular 4—Angular 4
+ introduce la capacidad de ..."
Correct: "New *ngIf capabilities—new in version 4.0 is the ability to ..."
Incorrect: "New *ngIf capabilities in Angular 4—Angular 4 introduces the ability to ..."
Razonamiento
-Reasoning
+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.
-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.
+AngularJS
-AngularJS
+AngularJS es la serie v1.x de trabajo y promesas proporcionadas por el equipo de Angular.
-AngularJS is the v1.x series of work and promises provided by the Angular team.
+Ejemplos
+-
+
- AngularJS es uno de los marcos más utilizados en la web en la actualidad (por número de proyectos). +
- Millones de desarrolladores están construyendo actualmente con AngularJS. +
- Los desarrolladores están comenzando a actualizar de AngularJS a Angular. +
- Estoy actualizando mi aplicación de AngularJS a Angular. +
- Estoy usando AngularJS Material en este proyecto. +
Examples
--
-
- AngularJS is one of the most used framework on the web today (by number of projects). -
- Millions of developers are currently building with AngularJS. -
- Developers are beginning to upgrade from AngularJS to Angular. -
- I’m upgrading my application from AngularJS to Angular. -
- I'm using AngularJS Material on this project. -
AngularJS projects should use the +
Los proyectos de AngularJS deben usar el - original AngularJS logo / icon, and not the Angular icon.
+ logo original de AngularJS / icono, y no el icono de Angular. -
+
- Angular Material
+Angular Material
-This is the work being performed by the Angular team to provide Material Design components for Angular applications.
+Este es el trabajo que está realizando el equipo de Angular para proporcionar componentes de Material Design + para aplicaciones Angular.
-AngularJS Material
+Material de AngularJS
-This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.
+Este es el trabajo que está realizando el equipo de Angular en los componentes de Material Design que son + compatibles con AngularJS.
-3rd Party Projects
+Proyectos de terceros
-X for Angular
+X para Angular
-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.
+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.
-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.
+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.
-Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.
+Cuando se usa un nombre en clave o un nombre abreviado, como en npm o github, algunos son aceptables, otros + no.
- Do not use --
-
ng2-
- angular2-
-
-
+
ng2-
+ angular2-
+
-
-
ng-
- angular-
-
-
+
ng-
+ angular-
+
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.
+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.
-Examples
--
-
- The ng-BE team just launched
ng-healthto help developers track their own health.
- - I’m going to use NativeScript for Angular to take advantage of native UI widgets. -
ReallyCoolToolfor Angular.
- ReallyCoolToolfor AngularJS.
-
Ejemplos
+-
+
- El equipo ng-BE acaba de lanzar
ng-healthPara ayudar a los desarrolladores a rastrear su + propia salud.
+ - Voy a usar NativeScript para Angular para aprovechar los widgets de IU nativos. +
ReallyCoolToolpara Angular.
+ ReallyCoolToolpara AngularJS.
+
-
TERMS WE USE
+TÉRMINOS QUE UTILIZAMOS
- 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.
- Ahead of Time compilation (AOT) @@ -626,4 +694,4 @@
+
+ For the sample app that this page describes, see the
+
+
+## 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.
+
+` at the top,
+* Below it add an HTML unordered list (``)
+* Insert an `- ` within the `
` that displays properties of a `hero`.
+* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
+
+Make it look like this:
+
+- ` to iterate through the list of heroes:
+
+
+
+
+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:
+
+* ` - ` 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.
+
+
+
+Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax.
+
+
+
+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— the code, the HTML,
+and the CSS —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.
+
+
+
+
+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.
+
+
+
+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.
+
+
+
+## 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 ` - ` like this:
+
+
- ` element's `click` event.
+When the user clicks in the `
- `, 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`.
+
+
+ HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
+
+
+#### What happened?
+
+When the app starts, the `selectedHero` is `undefined` _by design_.
+
+Binding expressions in the template that refer to properties of `selectedHero`—expressions like `{{selectedHero.name}}`—_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 ``.
+Add Angular's `*ngIf` directive to the `` and set it to `selectedHero`.
+
+
+
+
+Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
+
+
+
+- ` elements look alike.
+
+If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
+
+
+
+
+
+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 ` - ` 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 `
- ` in the `HeroesComponent` template:
+
+
- ` looks like this:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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.
- For the sample app that this page describes, see the
-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.
-### 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 `` at the top,
-* Below it add an HTML unordered list (``)
-* Insert an `- ` within the `
` that displays properties of a `hero`.
-* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
+* Agrega `` al principio
+* Agrega una lista HTML desordenada (``) debajo de ella
+* Inserta `- ` dentro del `
` 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:
- ` to iterate through the list of heroes:
+Esto muestra un héroe. Para enumerarlos a todos, agrega `*ngFor*` a `
- ` para iterar sobre la lista de héroes.
-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.
-* ` - ` 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:
+
+* `
- ` 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
-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.
-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— the code, the HTML,
-and the CSS —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 —
+código, HTML, CSS— 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.
-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.
-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.
-## 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 ` - ` like this:
+Agrega el enlace de evento click a su `
- ` así:
- ` element's `click` event.
-When the user clicks in the `
- `, Angular executes the `onSelect(hero)` expression.
+Los paréntesis alrededor del `clic` le dicen a Angular que es un evento `clic` para el elemento `
- `.
+Cuando el usuario hace clic en `
- `, 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`.
- 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
-#### 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`—expressions like `{{selectedHero.name}}`—_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 ``.
-Add Angular's `*ngIf` directive to the `` 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 ``.
+Agrega la directiva angular `*ngIf` a su `` y configúrelo en `selectedHero`.
-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.
- ` 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 `
- ` 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:
-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 `
- ` 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 `
- ` 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 `
- ` in the `HeroesComponent` template:
+Agrega el enlace `[class.selected]` al `
- ` en `HeroesComponent` Plantillas:
- ` looks like this:
+El `
- ` completado se ve así:
-
{@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`.
-
+
@@ -241,13 +226,12 @@ Here are the code files discussed on this page, including the `HeroesComponent`
-
-## 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`
- ` that displays properties of a `hero`.
+* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
+
+Make it look like this:
+
+
- ` to iterate through the list of heroes:
+
+
+ + +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: + +* ` - ` 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.
+
++ +Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax. + ++ +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— the code, the HTML, +and the CSS —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. + +
+ + +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. + ++ +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. + ++ +## 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 ` - ` like this:
+
+
+ +This is an example of Angular's [event binding](guide/event-binding) syntax. + +The parentheses around `click` tell Angular to listen for the ` - ` element's `click` event. +When the user clicks in the `
- `, 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`.
+
+
+ +### 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: + + + +After the browser refreshes, the application is broken. + +Open the browser developer tools and look in the console for an error message like this: + + + HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined + + +#### What happened? + +When the app starts, the `selectedHero` is `undefined` _by design_. + +Binding expressions in the template that refer to properties of `selectedHero`—expressions like `{{selectedHero.name}}`—_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 ``. +Add Angular's `*ngIf` directive to the `` and set it to `selectedHero`. + + ++ +Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax. + ++ ++ +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 ` - ` elements look alike. + +If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this: + +
++ +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 `
+- ` 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 `
- ` in the `HeroesComponent` template: + +
+ +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 ` - ` looks like this: + +
+ +{@a final-code-review} + +## Final code review + +Here are the code files discussed on this page, including the `HeroesComponent` styles. + + + + + +## 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.+ + ++ + ++ + ++ + +- For the sample app that this page describes, see the-## 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í:. +Para ver la aplicación de ejemplo que describe esta página, consulta el . -## 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`. ` at the top, -* Below it add an HTML unordered list (`
- `)
-* Insert an `
- ` within the `
- ` that displays properties of a `hero`.
-* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
+* Agrega `
- ` dentro del `
- ` 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:
- ` to iterate through the list of heroes: +Esto muestra un héroe. Para enumerarlos a todos, agrega `*ngFor*` a `
- ` para iterar sobre la lista de héroes.
- ` 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: + +* `
- ` 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
-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.-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— the code, the HTML, -and the CSS —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 — +código, HTML, CSS— 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.
- ` like this: +Agrega el enlace de evento click a su `
- ` así:
-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 ` - ` element's `click` event. -When the user clicks in the `
- `, Angular executes the `onSelect(hero)` expression. +Los paréntesis alrededor del `clic` le dicen a Angular que es un evento `clic` para el elemento `
- `. +Cuando el usuario hace clic en `
- `, 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`.
-### 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`. -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: - 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 -#### 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`—expressions like `{{selectedHero.name}}`—_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 ``. -Add Angular's `*ngIf` directive to the `` 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 ``. +Agrega la directiva angular `*ngIf` a su `` y configúrelo en `selectedHero`.-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.-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 ` - ` 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 `
- ` 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:
-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 `
- ` 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 `
- ` 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 `
- ` in the `HeroesComponent` template: +Agrega el enlace `[class.selected]` al `
- ` en `HeroesComponent` Plantillas:
-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 ` - ` looks like this: +El `
- ` completado se ve así: -
+
-That shows one hero. To list them all, add an `*ngFor` to the `
` al principio +* Agrega una lista HTML desordenada (`
- `) debajo de ella
+* Inserta `
- ` dentro del `
- ` elements look alike. + +If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this: + +