anchor.diff:    We'll have to update the template.
     At the moment it displays the hero's `id` and `name`.
     Let's fix that so we display only the hero's `name` property.
  +  
  +  Tenemos que actualizar la plantilla.
  +  En este momento despliega el `id` y el `name` del héroe.
   
   +makeExcerpt('app/app.component.3.ts', 'template')
   
   :marked
     Our display looks the same, but now we know much better what a hero really is.
  +  
  +  Lo que desplegamos se ve igual, pero ahora sabemos mucho mejor lo que es un héroe en realidad.
   
   .l-main-section#ngIf
   :marked
     ## Conditional display with NgIf
  +  
  +  ## Despliegue condicional con NgIf
   
     Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
  +  
  +  A veces un aplicación necesita desplegar una vista o una porción de una vista solo bajo sircunstancias específicas.
   
     In our example, we'd like to display a message if we have a large number of heroes, say, more than 3.
  +  
  +  En nuestro ejemplo, nos gustaría desplegar un mensaje si tenemos un gran numero de héroes, digamos, más de 3.
   
     The Angular `ngIf` directive inserts or removes an element based on a !{_boolean} condition.
     We can see it in action by adding the following paragraph at the bottom of the template:
  +  
  +  La directiva `ngIf` de Angular inserta o remueve un elemento basado en una condición !{_boleana}.
  +  Podemos verlo en una condición agregando el siguiente párrafo hasta abajo de la plantilla:
   
   +makeExcerpt('app/app.component.ts', 'message')
   
  
positive.code: .l-main-section
  :marked
    ## Creating a class for the data
  
    We are defining our data directly inside our component.
    That's fine for a demo but certainly isn't a best practice. It's not even a good practice.
    Although we won't do anything about that in this chapter, we'll make a mental note to fix this down the road.
  
    At the moment, we're binding to !{_an} !{_array} of strings. We do that occasionally in real applications, but
    most of the time we're binding to more specialized objects.
  
    Let's turn our !{_array} of hero names into !{_an} !{_array} of `Hero` objects. For that we'll need a `Hero` class.
  
    Create a new file in the `!{_appDir}` folder called  <ngio-ex path="hero.ts"></ngio-ex> with the following code:
    
  +makeExcerpt('app/hero.ts')
  
  block hero-class
    :marked
      We've defined a class with a constructor and two properties: `id` and `name`.
  
      It might not look like we have properties, but we do. We're taking
      advantage of a TypeScript shortcut in our declaration of the constructor parameters.
  
      Consider the first parameter:
  
    +makeExcerpt('app/hero.ts ()', 'id')
  
  
negative.code:   - **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,
  