+
+In this case, `ngFor` is displaying an array, but `ngFor` can
+repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) object.
+
+
+
+Now the heroes appear in an unordered list.
+
+
+
+Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
+Read more about `ngIf` and `*` in the [ngIf section](guide/built-in-directives#ngIf) of the [Built-in directives](guide/built-in-directives) page.
+
+
+
+
+The template expression inside the double quotes,
+`*ngIf="heroes.length > 3"`, looks and behaves much like TypeScript.
+When the component's list of heroes has more than three items, Angular adds the paragraph
+to the DOM and the message appears.
+If there are three or fewer items, Angular omits the paragraph, so no message appears.
+
+For more information, see [template expression operators](guide/interpolation#template-expressions).
+
+
+
+
+Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in larger projects when conditionally including or excluding
+big chunks of HTML with many data bindings.
+
+
+
+Try it out. Because the array has four items, the message should appear.
+Go back into
@@ -23,90 +23,86 @@ The final UI looks like this:
-The demonstrates all of the syntax and code snippets described in this page.
+El demuestra toda la sintaxis y los fragmentos de código descritos en esta página.
{@a interpolation}
-## Showing component properties with interpolation
-The easiest way to display a component property is to bind the property name through interpolation.
-With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
+## Mostrando propiedades del componente con interpolación
+La manera mas sencilla de mostrar la propiedad de un componente es realizar el enlace del nombre de la propiedad por medio de interpolación.
+Con interpolación, pones el nombre de la propiedad en la plantilla de vista, encerrado en llaves dobles: `{{myHero}}`.
-Use the CLI command [`ng new displaying-data`](cli/new) to create a workspace and app named `displaying-data`.
+Usa el comando CLI [`ng new displaying-data`](cli/new) para crear un nuevo espacio de trabajo y una aplicacón llamada `displaying-data`.
-Delete the
app.component.html file. It is not needed for this example.
+Borra el archivo
app.component.html. Este no es necesario para este ejemplo.
-Then modify the
app.component.ts file by
-changing the template and the body of the component.
+Entonces modifica el archivo
app.component.ts
+cambiando la plantilla y el cuerpo del componente.
-When you're done, it should look like this:
+Cuando hayas terminado, debería verse de la siguiente manera:
-You added two properties to the formerly empty component: `title` and `myHero`.
+Agregaste dos propiedades al componente anteriormente vacío: `title` y `myHero`.
-The template displays the two component properties using double curly brace
-interpolation:
+La plantilla muestra las propiedades de los dos componentes usando la interpolación de dobles llaves:
-The template is a multi-line string within ECMAScript 2015 backticks (\`).
-The backtick (\`)—which is *not* the same character as a single
-quote (`'`)—allows you to compose a string over several lines, which makes the
-HTML more readable.
+La plantilla es una cadena de texto multi-línea dentro de las comillas invertidas de ECMAScript 2015 (\`).
+La comilla invertida (\`)—que *no* es la misma que una comilla sencilla (`'`)—te permite componer una cadena de texto de muchas líneas,
+lo que hace que el HTML sea mas legible.
-Angular automatically pulls the value of the `title` and `myHero` properties from the component and
-inserts those values into the browser. Angular updates the display
-when these properties change.
+Angular automaticamente pone el valor de las propiedades `title` y `myHero` del componente
+ e inserta dichos valores en el navegador. Angular actualiza la vista cuando esas propiedades cambian.
-More precisely, the redisplay occurs after some kind of asynchronous event related to
-the view, such as a keystroke, a timer completion, or a response to an HTTP request.
+Mas precisamente, la revisualización ocurre despues de algun tipo de evento asíncrono relacionado a
+la vista, como pulsaciones de teclas, finalización de un temporizador, o la respuesta de una solicitud HTTP.
-Notice that you don't call **new** to create an instance of the `AppComponent` class.
-Angular is creating an instance for you. How?
+Observa que no se usa **new** para crear una instancia de una clase de `AppComponent`.
+Angular está creando la instancia por tí, ¿Como?
-The CSS `selector` in the `@Component` decorator specifies an element named `
`.
-That element is a placeholder in the body of your `index.html` file:
+El `selector` CSS en el decorador `@Component` especifica un elemento llamado ``.
+Ese elemento es un marcador de posición en el cuerpo de su archivo `index.html`:
-When you bootstrap with the `AppComponent` class (in main.ts), Angular looks for a ``
-in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
-inside the `` tag.
+Cuando arranca con la clase `AppComponent` (en main.ts), Angular busca un ``
+en el `index.html`, lo encuentra, crea una instancia de `AppComponent`, y lo representa
+dentro de la etiqueta ``.
-Now run the app. It should display the title and hero name:
+Ahora corre la app. Debería mostrar el título y el nombre del héroe:
-The next few sections review some of the coding choices in the app.
+Las siguientes secciones revisan algunas de las opciones de codificación de la aplicación.
+## Escogiendo el origen de la plantilla
-## Choosing the template source
+Los metadatos del `@Component` le dicen a Angular donde encontrar la plantilla del componente.
+Puedes guardar la plantilla de tu componente en uno de dos lugares.
-The `@Component` metadata tells Angular where to find the component's template.
-You can store your component's template in one of two places.
+* Puedes definir la plantilla *inline* usando la propiedad `template` del decorador `@Component`. Una plantilla en línea es útil para un pequeño demo o prueba.
+* Alternativamente, puedes definir la plantilla en un archivo HTML separado y enlazar ese archivo en la propiedad `templateUrl` del decorador `@Component`. Esta es una configuración típica para cualquier cosa mas compleja que un pequeño test o demo, y esto pasa por defecto cuando se genera un nuevo componente.
-* You can define the template *inline* using the `template` property of the `@Component` decorator. An inline template is useful for a small demo or test.
-* Alternatively, you can define the template in a separate HTML file and link to that file in the `templateUrl` property of the `@Component` decorator. This configuration is typical for anything more complex than a small test or demo, and is the default when you generate a new component.
-
-In either style, the template data bindings have the same access to the component's properties.
-Here the app uses inline HTML because the template is small and the demo is simpler without the additional HTML file.
+En cualquier estilo, el enlace de datos de la plantilla tiene el mismo acceso a las propiedades del componente.
+Aquí la app usa HTML en línea por que la plantilla es pequeña y el demo es mas simple sin el archivo HTML adicional.
- By default, the Angular CLI command [`ng generate component`](cli/generate) generates components with a template file.
- You can override that by adding the "-t" (short for `inlineTemplate=true`) option:
+ Por defecto, el comando de la CLI de Angular [`ng generate component`](cli/generate) genera componentes con un archivo de plantilla.
+ Puede anular esto adicionando la opción "-t" (abreviación para `inlineTemplate=true`)
ng generate component hero -t
@@ -115,138 +111,133 @@ Here the app uses inline HTML because the template is small and the demo is simp
-## Initialization
+## Inicialización
-The following example uses variable assignment to initialize the components.
+El siguiente ejemplo usa asignación de variables para inicializar los componentes.
- You could instead declare and initialize the properties using a constructor.
- This app uses more terse "variable assignment" style simply for brevity.
-
+ En su lugar, podrías declarar e inicializar las propiedades utilizando un constructor.
+ Esta aplicación utiliza un estilo de "asignación de variables" más conciso simplemente por brevedad.
{@a ngFor}
-## Add logic to loop through data
+## Agregue lógica para recorrer los datos
-The `*ngFor` directive (predefined by Angular) lets you loop through data. The following example uses the directive to show all of the values in an array property.
-
-To display a list of heroes, begin by adding an array of hero names to the component and redefine `myHero` to be the first name in the array.
+La directiva `*ngFor` (predefinida por Anglar) permite recorrer los datos. El siguiente ejemplo usa la directiva para mostrar todos los valores de las propiedades de un arreglo.
+Para mostrar una lista de héroes, comienza agregando un arreglo de nombres de héroes al componente y redefinir `myHero` para ser el primer nombre en el arreglo.
-Now use the Angular `ngFor` directive in the template to display each item in the `heroes` list.
+Ahora usa la directiva de Angular `ngFor` en la plantilla para mostrar cada item en la lista de `heroes`.
-This UI uses the HTML unordered list with `` and `- ` tags. The `*ngFor`
-in the `
- ` element is the Angular "repeater" directive.
-It marks that `
- ` element (and its children) as the "repeater template":
+Esta interfaz de usuario usa una lista desordenada de HTML con las etiquetas `
` y `- `. El `*ngFor`
+en el elemento `
- ` es la directiva "repetidora" de Angular.
+Esto marca el elemento `
- ` (y sus hijos) como la "plantilla repetidora":
-Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
-Read more about `ngFor` and `*` in the [ngFor section](guide/built-in-directives#ngfor) of the [Built-in directives](guide/built-in-directives) page.
+No olvides el asterisco inicial (\*) en `*ngFor`. Esto es parte escencial de la sintaxis.
+Lee más acerca de `ngFor` y `*` en la [sección ngFor](guide/built-in-directives#ngfor) de la página de [directivas integradas](guide/built-in-directives).
-Notice the `hero` in the `ngFor` double-quoted instruction;
-it is an example of a template input variable. Read
-more about template input variables in the [microsyntax](guide/built-in-directives#microsyntax) section of
-the [Built-in directives](guide/built-in-directives) page.
+Observa el `hero` en la instrucción` ngFor` entre comillas dobles;
+este es un ejemplo de una plantilla de variable de entrada.
+Lee más acerca de plantillas de variables de entrada en la sección [microsintaxis](guide/built-in-directives#microsyntax) de
+la página de [directivas integradas](guide/built-in-directives).
-Angular duplicates the ` - ` for each item in the list, setting the `hero` variable
-to the item (the hero) in the current iteration. Angular uses that variable as the
-context for the interpolation in the double curly braces.
+Angular duplica el `
- ` por cada elemento en la lista, configurando la variable `hero`
+para el elemento (el héroe) en la iteración actual. Angular usa esta variable como el
+contexto para la interpolación dentro de las llaves dobles.
-In this case, `ngFor` is displaying an array, but `ngFor` can
-repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) object.
+En este caso, `ngFor` está mostrando un arreglo, pero `ngFor` puede
+repetir elementos para cualquier objeto [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols).
-Now the heroes appear in an unordered list.
+Ahora los héroes aparecen en una lista desordenada.
-## Creating a class for the data
+## Creando una clase para los datos
-The app's code defines the data directly inside the component, which isn't best practice.
-In a simple demo, however, it's fine.
+El código de la aplicación define los datos directamente dentro del componente, lo cual no es la mejor practica.
+Sin embargo en un demo simple, está bien.
-At the moment, the binding is to an array of strings.
-In real applications, most bindings are to more specialized objects.
+Hasta el momento, el enlace es a un arreglo de cadenas de texto.
+En aplicaciones reales, muchos enlaces son a objetos mas especializados.
-To convert this binding to use specialized objects, turn the array
-of hero names into an array of `Hero` objects. For that you'll need a `Hero` class:
+Para convertir este enlace para usar objetos especializados, convierta el arreglo
+de nombres de héroes en un arreglo de objetos `Hero`. Para esto necesitarás una clase `Hero`:
ng generate class hero
-This command creates the following code.
+Este comando crea el siguiente código.
-You've defined a class with a constructor and two properties: `id` and `name`.
+Has definido una clase con un constructor y dos propiedades: `id` y `name`.
-It might not look like the class has properties, but it does.
-The declaration of the constructor parameters takes advantage of a TypeScript shortcut.
+Puede que parezca que la clase no tiene propiedades, pero las tiene.
+La declaración de los parámetros del constructor aprovecha un atajo de TypeScript.
-Consider the first parameter:
+Considera el primer parámetro;
-That brief syntax does a lot:
-
-* Declares a constructor parameter and its type.
-* Declares a public property of the same name.
-* Initializes that property with the corresponding argument when creating an instance of the class.
+Esa breve sintaxis hace mucho:
+* Declara un parametro del constructor y su tipo.
+* Declara una propiedad pública del mismo nombre.
+* Inicializa esa propiedad con el argumento correspondiente cuando se crea una instancia de la clase.
-### Using the Hero class
+### Usando la clase Hero
-After importing the `Hero` class, the `AppComponent.heroes` property can return a _typed_ array
-of `Hero` objects:
+Después de importar la clase `Hero`, la propiedad `AppComponent.heroes` puede retornar un arreglo _tipeado_
+de objetos `Hero`.
-Next, update the template.
-At the moment it displays the hero's `id` and `name`.
-Fix that to display only the hero's `name` property.
-
+Ahora, actualiza la plantilla.
+Hasta el momento esto muestra los `id` y `name` de héroe.
+Cámbialo para mostrar solo la propiedad `name` de héroe.
-
-The display looks the same, but the code is clearer.
+La visualización parece la misma, pero el código es mas claro.
{@a ngIf}
-## Conditional display with NgIf
+## Visualización condicional con NgIf
-Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
+A veces una app necesita mostrar una vista o una porción de la vista solo bajo circunstancias específicas.
-Let's change the example to display a message if there are more than three heroes.
+Cambiemos el ejemplo para mostrar un mensaje si hay más de tres héroes.
-The Angular `ngIf` directive inserts or removes an element based on a _truthy/falsy_ condition.
-To see it in action, add the following paragraph at the bottom of the template:
+La directiva de Angular `ngIf` inserta o remueve un elemento basado en una condición _verdadera/falsa_.
+Para verlo en acción, agrega el siguiente párrafo al final de la plantilla:
@@ -254,42 +245,42 @@ To see it in action, add the following paragraph at the bottom of the template:
-Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
-Read more about `ngIf` and `*` in the [ngIf section](guide/built-in-directives#ngIf) of the [Built-in directives](guide/built-in-directives) page.
+No olvides el asterisco inicial (\*) en `*ngIf`. Esto es parte escencial de la sintaxis.
+Lee mas acerca de `ngIf` y `*` en la [sección ngIf](guide/built-in-directives#ngIf) de la página [Directivas integradas](guide/built-in-directives).
-The template expression inside the double quotes,
-`*ngIf="heroes.length > 3"`, looks and behaves much like TypeScript.
-When the component's list of heroes has more than three items, Angular adds the paragraph
-to the DOM and the message appears.
-If there are three or fewer items, Angular omits the paragraph, so no message appears.
+La expresión de plantilla dentro de las comillas dobles,
+`*ngIf="heroes.length > 3"`, parece y se comporta como TypeScript.
+Cuando la lista de héroes del componente tiene mas de tres elementos, Angular agrega el párrafo
+al DOM y el mensaje aparece.
+Si hay tres o ménos items, Angular omite el párrafo, entonces el mensaje no aparece.
-For more information, see [template expression operators](guide/interpolation#template-expressions).
+Para mas información, visita [operadores de expresión de plantilla](guide/interpolation#template-expressions).
-Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in larger projects when conditionally including or excluding
-big chunks of HTML with many data bindings.
+Angular no está mostrando y escondiendo el mensaje. El elemento párrafo es agregado o removido del DOM. Esto mejora el desempeño, especialmente en grandes proyectos cuando
+condicionalmente se incluyen o excluyen
+grandes porciones de HTML con muchos enlaces de datos.
-Try it out. Because the array has four items, the message should appear.
-Go back into app.component.ts and delete or comment out one of the elements from the heroes array.
-The browser should refresh automatically and the message should disappear.
-
+Probemoslo. Como el arreglo tiene cuatro elementos, el mensaje debe aparecer.
+Vuelve al app.component.ts y elimina o comenta uno de los elementos del arreglo de héroes.
+El navegador debería actualizarse automáticamente y el mensaje debería desaparecer.
-## Summary
-Now you know how to use:
+## En Resumen
+Ahora sabes cómo usar:
-* **Interpolation** with double curly braces to display a component property.
-* **ngFor** to display an array of items.
-* A TypeScript class to shape the **model data** for your component and display properties of that model.
-* **ngIf** to conditionally display a chunk of HTML based on a boolean expression.
+* **Interpolación** con dobles llaves para mostrar la propiedad de un componente.
+* **ngFor** para mostrar un arreglo de elementos.
+* Una clase de TypeScript para dar forma a los **datos del modelo** para su componente y mostrar las propiedades de ese modelo.
+* **ngIf** para mostrar condicionalmente un trozo de HTML basado en una expresión booleana.
-Here's the final code:
+Este es el código final:
+
+