anchor.diff:    
     Let's demonstrate with  a clever keystroke loopback in a single line of template HTML. 
     We don't actually need a dedicated component to do this but we'll make one anyway.
  -  
  -code-example(format="linenums" language="html" ).
  -  @Component({
  -    selector: 'loop-back',
  -    template: `&lt;input #box (keyup)="0"> &lt;p>{{box.value}}&lt;/p>`
  -  })
  -  class LoopbackComponent {
  -  }
  -
  ++makeExample('template-syntax/ts/src/app/app.ts', 'loop-back-component')
   :markdown
     We've declared a template local variable named `box` on the `<input>` element.
     The `box` variable is a reference to the `<input>` element itself which means we can 
  
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:   what the user types back onto the screen.
    
    This time we'll both listen to an event and grab the user's input.
  +makeExample('template-syntax/ts/src/app/app.ts', 'key-up-component')
  :markdown
    Angular makes an event object available in the **`$event`** variable. The user data we want is in that variable somewhere.
    
  