anchor.diff:    - **ngFor** to display !{_an} !{_array} of items
     - A !{_Lang} class to shape the **model data** for our component and display properties of that model
     - **ngIf** to conditionally display a chunk of HTML based on a boolean expression
  +  
  +  ## Resumen
  +  Ahora ya sabemos como usar:
  +  - **Interpolación** con dobles llaves para desplegar una propiedad del componente
  +  - **ngFor** para desplegar !{_un} !{_arreglo}
  +  - Una clase !{_Lang} para dar forma al **modelo de datos** para nuestro componente y desplegar propiedades de ese modelo
  +  - **ngIf** para desplegar condicionalmente pedasos de HTML de basados en una expresión boleana
   
     Here's our final code:
  +  
  +  Aquí está nuestro código final:
   
   block final-code
     +makeTabs(`displaying-data/ts/app/app.component.ts,
  
positive.code: :marked
    We typically display data in Angular by binding controls in an HTML template
    to properties of an Angular component.
  
    In this chapter, we'll create a component with a list of heroes. Each hero has a name.
    We'll display the list of hero names and
    conditionally show a message below the list.
  
    The final UI looks like this:
  
  figure.image-display
    img(src="/resources/images/devguide/displaying-data/final.png" alt="Final UI")
  
  :marked
    # Table Of Contents
  
    * [Showing component properties with interpolation](#interpolation)
    * [Showing !{_an} !{_array} property with NgFor](#ngFor)
    * [Conditional display with NgIf](#ngIf)
  
  .l-sub-section
    :marked
      The <live-example></live-example> demonstrates all of the syntax and code
      snippets described in this chapter.
  
  .l-main-section#interpolation
  :marked
  
negative.code:   We added a somewhat mysterious `*ngFor` to the `<li>` element.
    That's the Angular "repeater" directive.
    Its presence on the `<li>` tag marks that `<li>` element (and its children) as the "repeater template".
    
    Agregamos `*ngFor` que es un tanto misterioso al elemento `<li>`.
    Esta es la directiva "repeater" de Angular.
    Su presencia en el tag `<li>` marca ese elemento (y sus hijos) como "repeater template".
  
  .alert.is-important
    :marked
      Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
      Learn more about this and `ngFor` in the [Template Syntax](./template-syntax.html#ngFor) chapter.
      
      No olvide el asterisco (\*) inicial en el `*ngFor`. Es una parte esencial de la sintaxis.
      Aprenda más acerca de `*ngFor` en el capítulo de [Sintaxis de Plantilla](./template-syntax.html#ngFor).
  
  :marked
    Notice the `hero` in the `ngFor` double-quoted instruction;
    it is an example of a [template input variable](./template-syntax.html#ngForMicrosyntax).
    
    Note el `hero` en el `ngFor` de la instrucción en dobles comillas;
    es un ejemplo de una [variable de input de plantilla](./template-syntax.html#ngForMicrosyntax).
  
    Angular duplicates the `<li>` 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 `<li>` por cada objeto de la lista, poniendo a la variable `hero`
    el objeto (héroe) en la iteración actual. Angular usa esa variables como el
    contexto para la interpolación en las dobles llaves.
  
  .l-sub-section
    :marked
  