anchor.diff:    :marked
       Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
       Learn more about this and `ngIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter.
  +    
  +    No olvide el asterisco (\*) al principio del `*ngIf`. Es una parte esencial de la sintaxis.
  +    Aprenda más acerca de `ngIf` en el capítulo [Sintaxis de Plantilla](./template-syntax.html#ngIf)
   
   :marked
     The [template expression](./template-syntax.html#template-expressions) inside the double quotes
     looks much like !{_Lang}, and it _is_ much like !{_Lang}.
     When the component's list of heroes has more than 3 items, Angular adds the paragraph to the DOM and the message appears.
     If there are 3 or fewer items, Angular omits the paragraph, so no message appears.
  +  
  +  La [expresión de plantilla](./template-syntax.html#template-expressions) dentro de las dobles comillas
  +  es !{_Lang}.
  +  Cuando la lista de héroes del componente tiene más de 3 héroes, Angular agrega el párrafo al DOM y el mensaje aparece.
  +  Si hay 3 o menos héroes, Angular omite el párrafo, así que el mensaje nunca aparece.
   
   .alert.is-helpful
     :marked
       Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM.
       That hardly matters here. But it would matter a great deal, from a performance perspective, if
       we were conditionally including or excluding a big chunk of HTML with many data bindings.
  +    
  +    Angular no está mostrando y ocultando el mensaje. Agrega o remueve el elemento de párrafo del DOM.
  +    Esto no es muy importante en nuestro ejemplo, pero sería de gran importancia desde el punto de vista del rendimiento, si
  +    incluimos o excluimos condicionalmente un pedazo grande de HTML con muchos data bindings.
   
   :marked
     Try it out. Because the !{_array} has four items, the message should appear.
     Go back into <ngio-ex path="app.component.ts"></ngio-ex> and delete or comment out one of the elements from the hero !{_array}.
     The browser should refresh automatically and the message should disappear.
  +  
  +  Pruébalo. Como el !{_arreglo} tiene cuatro héroes, el mensaje debe aparecer.
  +  Regresa a <ngio-ex path="app.component.ts"></ngio-ex> y borra o comenta uno de los elementos del {_arreglo} de héroes.
  +  El navegador debe actualizarse automáticamente y el mensaje debe desaparecer.
   
   .l-main-section
   :marked
  
positive.code:   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.
  
  +makeExcerpt('app/app.component.3.ts', 'template')
  
  :marked
    Our display looks the same, but now we know much better what a hero really is.
  
  .l-main-section#ngIf
  :marked
    ## Conditional display with NgIf
  
    Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
  
    In our example, we'd like to display a message if we have a large number of heroes, say, more than 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:
  
  +makeExcerpt('app/app.component.ts', 'message')
  
  
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
  