anchor.diff:    grab the input element's `value` and display it
     with interpolation between `<p>` tags.
   
  +  Nous venons de déclarer une variable de référence nommée `box` sur l'élément `<input>`.
  +  La variable `box` est une référence vers l'élément `<input>` lui-même, ce qui veut dire 
  +  que nous pouvons récupérer l'attribut `value` de l'élément `input` et l'afficher entre des balises `<p>` 
  +  en utilisant l'interpolation.    
  +
     The template is completely self contained. It doesn't bind to the component,
     and the component does nothing.
   
  +  Ce template est complètement autonome. Il n'est pas lié au composant, et le composant ne fait rien.
  +
     Type in the input box, and watch the display update with each keystroke. *Voila!*
  +
  +  Tapez dans le champ de saisie, et regardez comment l'affichage se met à jour avec chaque frappe. *That's it !*
   
   figure.image-display
       img(src='/resources/images/devguide/user-input/keyup-loop-back-anim.gif' alt="loop back")
  
positive.code:     We cast the `$event` as an `any` type, which means we've abandoned strong typing
      to simplify our code. We generally prefer the strong typing that TypeScript affords.
      We can rewrite the method, casting to HTML DOM objects like this.
    +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-class', 'app/keyup.components.ts (class v.1 - strongly typed )')(format=".")
    :marked
      <br>Strong typing reveals a serious problem with passing a DOM event into the method:
      too much awareness of template details, too little separation of concerns.
  
      We'll address this problem in our next try at processing user keystrokes.
  :marked
  
  .l-main-section
  :marked
    ## Get user input from a template reference variable
    There's another way to get the user data without the `$event` variable.
  
    Angular has a syntax feature called [**template reference variables**](./template-syntax.html#ref-vars).
    These variables grant us direct access to an element.
    We declare a template reference variable by preceding an identifier with a hash/pound character (#).
  
    Here's an example of using a template reference variable
    to implement a clever keystroke loopback in an ultra-simple template.
  +makeExample('user-input/ts/app/loop-back.component.ts', 'loop-back-component', 'app/loop-back.component.ts')(format=".")
  :marked
    We've declared a template reference variable named `box` on the `<input>` element.
  
negative.code: :marked
    ## Summary
  
    ## Résumé
  
    We've mastered the basic primitives for responding to user input and gestures.
    As powerful as these primitives are, they are a bit clumsy for handling
    large amounts of user input. We're operating down at the low level of events when
    we should be writing two-way bindings between data entry fields and model properties.
  
    Nous maîtrisons les primitives de base pour répondre aux évènements de saisie et de mouvement de l'utilisateur.
    Aussi puissantes qu'elles peuvent l'être, elles sont un peu limitées pour gérer un grand nombre de saisies utilisateur.
    Nous manipulons à un bas niveau les évènements, alors que nous devrions écrire des liaisons bi-directionelle entre les champs de données 
    et les propriétés du modèle.
  
    Angular has a two-way binding called `NgModel`, which we'll learn about
    in the `Forms` chapter.
  
    Angular a un système de liaisons bi-directionelles appelé `NgModel`, que nous allons apprendre dans le chapitre sur les `Formulaires`.
  