anchor.diff:    <!--
     This example in http://plnkr.co/edit/JWeIqq
     -->
  -code-example(format="linenums" language="html" ). 
  -  import {bootstrap, Component CORE_DIRECTIVES} from 'angular2/core'
  -    
  -  @Component({
  -    selector: 'little-tour',
  -    template: `
  -      &lt;h4>Little Tour of Heroes&lt;/h4>
  -      &lt;input #new-hero (keyup.enter)="addHero(newHero)">
  -      &lt;button (click)=addHero(newHero)>Add&lt;/button>
  -      &lt;ul>&lt;li *ng-for="#hero of heroes">{{hero}}&lt;/li>&lt;/ul>
  -      &lt;div>There are so many heroes!&lt;/div>
  -    `,
  -    directives: [CORE_DIRECTIVES]
  -  })
  -  class LittleTour {
  -    heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  -        
  -    addHero(newHero) {
  -      if (newHero.value) { 
  -        this.heroes.push(newHero.value); 
  -        newHero.value = null; // clear the newHero textbox
  -      }
  -    }
  -  }
  -  
  -  bootstrap(LittleTour);
  -  
  ++makeExample('template-syntax/ts/src/app/app.ts', 'little-tour-of-heroes-app')  
   :markdown
     We've seen almost everything here before. A few things are new or bear repeating.
     
  
positive.code:   
    Unfortunately, we can't use that name when we declare the variable with (#). 
    The browser forces all attribute and element names to lowercase, turning what would be `#newHero`
    into `#newhero`. We don't want a `newhero` variable name in our template expressions. 
    The Angular workaround is to spell the declaration in "snake case". When Angular encounters "#new-hero",it translates
    that to `newHero` for template expressions ... which is exactly what we want.
    
    ### **keyup.enter - a KeyEvent filter** 
    We'll add a hero name when the user clicks the "Add" button or hits the enter key. We ignore all other keys.
    If we bind to `(keyup)` our event handling expression hears every key event. We'd have to
    examine every `$event.keyCode` and respond only if the value is "Enter".
    
    Angular can filter the key events for us. Angular has a special syntax for keyboard events. 
    We can listen for just the "enter" key by binding to Angular's `keyup.enter` pseudo-event. 
    Then either the `keyup.enter` or the button click event
    can invoke the component's `addHero` method.
  
    ### **newHero refers to the `<input>` element**
    We can access the `newHero` variable from any sibling or child of the `<input>` element.
  
negative.code:   <!--
    These sample can be found in http://plnkr.co/edit/mr63T5
    -->
  +makeExample('template-syntax/ts/src/app/app.ts', 'click-me-component')
  :markdown
    The `onClickMe` in the template refers to the `onClickMe` method of the component. 
    When the user clicks the button, Angular calls the component's `onClickMe` method.
  
  