anchor.diff:    :marked
       **This won't work at all unless we bind to an event**.
   
  +    **Cela ne marcherait pas si nous ne nous lions pas à un évènement.** 
  +
       Angular only updates the bindings (and therefore the screen)
       if we do something in response to asynchronous events such as keystrokes.
  +
  +    Angular met à jour les liaisons (et donc l'écran)
  +    si nous faisons quelque chose en réponse à un évènement asynchrone comme une saisie clavier.
   
       That's why we bind the `keyup` event to a statement that does ... well, nothing.
       We're binding to the number 0, the shortest statement we can think of.
       That is all it takes to keep Angular happy. We said it would be clever!
  +
  +    C'est pour cela que nous lions l'évènement `keyup` à une expression qui ne fait... rien.
  +    Nous nous lions au nombre 0, l'expression la plus courte que nous puissions trouver.
  +    C'est juste ce qu'il faut pour rendre Angular heureux. Nous avions dit que cela allait être facile !
  +
   :marked
     That template reference variable is intriguing. It's clearly easier to get to the textbox with that
     variable than to go through the `$event` object. Maybe we can rewrite our previous
     keyup example so that it uses the variable to get the user's input. Let's give it a try.
  +
  +  La variable de référence dans le template est intriguante. Il est clairement plus facile d'accéder au champ de saisie avec cette 
  +  variable plutôt qu'avec l'objet `$event`. Nous pouvons réécrire notre précédent exemple pour qu'il utilise cette variable pour récupérer 
  +  les saisies de l'utilisateur. Essayons cela.
   +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-2' ,'app/keyup.components.ts (v2)')(format=".")
   :marked
     That sure seems easier.
     An especially nice aspect of this approach is that our component code gets clean data values from the view.
     It no longer requires knowledge of the `$event` and its structure.
   
  +  Cela semble vraiment plus facile.
  +  Un aspect particulièrement intéressant avec cette approche est que notre composant récupère des données propres depuis la vue.
  +  Il n'a plus besoin de connaître l'objet `$event` et sa structure.
  +
   <a id="key-event"></a>
   .l-main-section
   :marked
     ## Key event filtering (with `key.enter`)
  +
  +  ## Filtrage des évènements clavier (avec `key.enter`)
  +
     Perhaps we don't care about every keystroke.
     Maybe we're only interested in the input box value when the user presses Enter, and we'd like to ignore all other keys.
     When we bind to the `(keyup)` event, our event handling statement hears *every keystroke*.
     We could filter the keys first, examining every `$event.keyCode`, and update the `values` property only if the key is Enter.
   
  +  Il est possible que nous ne désirions pas traiter toutes les saisies claviers.
  +  Peut-être sommes-nous seulement intéressés par la valeur du champ de saisie quand l'utilisateur appuie sur Entrée, et 
  +  nous voulons ignorer les autres touches.
  +  Quand nous lions l'évènement `(keyup)`, notre expression liée à cet évènement reçoit *chaque touche relachée*.
  +  Nous pouvons filtrer la touche pour commencer, en examinant chaque `$event.keyCode`, et mettre à jour la propriété `values` seulement
  +  si la touche relachée est 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.
  +
  +  Angular peut filtrer les évènements clavier pour nous. Angular a une syntaxe spéciale pour les évènements clavier.
  +  Nous pouvons écouter seulement la touche Enter en se liant au pseudo-évènement `keyup.enter`.
   
     Only then do we update the component's `values` property. (In this example,
     the update happens inside the event binding statement. A better practice
     would be to put the update code in the component.)
  +
  +  C'est seulement à ce moment que nous mettons à jour la propriété `values`. (Dans cette exemple, 
  +  la mise à jour se fait dans l'expression liée à l'évènement. Une meilleure pratique serait de mettre le code
  +  de mise à jour dans le composant.)
  +
   +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-3' ,'app/keyup.components.ts (v3)')(format=".")
   :marked
     Here's how it works.
  +
  +  Voila comment cela fonctionne.
   figure.image-display
       img(src='/resources/images/devguide/user-input/keyup3-anim.gif' alt="key up 3")
   
   .l-main-section
   :marked
     ## On blur
  +
  +  ## Lors de la perte de focus
   
     Our previous example won't transfer the current state of the input box if the user mouses away and clicks
     elsewhere on the page. We update the component's `values` property only when the user presses Enter
     while the focus is inside the input box.
   
  +  Notre précédent exemple ne transfèrera pas l'état actuel du champ de saisie si l'utilisateur déplace la souris et clique ailleurs sur la page.
  +  Nous mettons à jour la propriété `values` du composant seulement quand l'utilisateur appuie sur Entrée et quand le focus est sur le champ de saisie. 
  +
     Let's fix that by listening to the input box's blur event as well.
   
  +  Réparons cela en écoutant également l'évènement `blur` du champ de saisie.
  +
   +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-4' ,'app/keyup.components.ts (v4)')(format=".")
   
   .l-main-section
   :marked
     ## Put it all together
  +
  +  ## Réunissons tout cela
  +
     We learned how to [display data](./displaying-data.html) in the previous chapter.
     We've acquired a small arsenal of event binding techniques in this chapter.
  +
  +  Nous avons appris comment [afficher des données](./displaying-data.html) dans le chapitre précédent.
  +  Nous avons également acquis un petit arsenal de techniques pour se lier aux évènements dans ce chapitre. 
   
     Let's put it all together in a micro-app
     that can display a list of heroes and add new heroes to that list.
     The user can add a hero by first typing in the input box and then
     pressing Enter, clicking the Add button, or clicking elsewhere on the page.
   
  +  Réunissons tout cela dans une micro-application qui peut afficher une liste de héros et ajouter de nouveaux héros à cette liste.
  +  L'utilisateur peut ajouter un héro en tapant, d'abord, dans le champ de saisie puis, soit en appuyant sur Entrée, soit en cliquant sur le bouton Ajouter, 
  +  soit en cliquant ailleurs sur la page.
  +
   figure.image-display
       img(src='/resources/images/devguide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes")
   :marked
     Below is the "Little Tour of Heroes"  component.
     We'll call out the highlights after we bask briefly in its minimalist glory.
   
  +  Ci dessous se trouve le composant "Petit Tour des Héros".
  +  Nous détaillerons ce code après avoir admiré sa magnificence minimaliste.
  +
   +makeExample('user-input/ts/app/little-tour.component.ts', 'little-tour', 'app/little-tour.component.ts')(format=".")
   :marked
     We've seen almost everything here before. A few things are new or bear repeating.
   
  +  Nous avons presque déja vu tout ce qui suit. Seuls quelques points sont nouveaux ou méritent d'être répétés.
  +
     ### Use template variables to refer to elements
  +
  +  ### Utiliser des variables dans le template pour se référer à des élements
   
     The `newHero` template variable refers to the `<input>` element.
     We can use `newHero` from any sibling or child of the `<input>` element.
  +
  +  La nouvelle variable de template `newHero` se réfère à l'élément `<input>`.
  +  Nous pouvons utiliser `newHero` depuis n'importe quel voisin ou enfant de l'élément `<input>`. 
   
     Getting the element from a template variable makes the button click handler
     simpler. Without the variable, we'd have to use a fancy CSS selector
     to find the input element.
   
  +  Récupérer l'élement depuis une variable de template rend le gestionnaire de clic du bouton plus simple.
  +  Sans cette variable, nous aurions dû utiliser un selecteur CSS pour trouver l'élément `<input>` 
  +
     ### Pass values, not elements
   
  +  ### Passer des valeurs, pas des éléments.
  +
     We could have passed the `newHero` into the component's `addHero` method.
  +
  +  Nous aurions pû passer la variable `newHero` dans la méthode `addHero` du composant.
   
     But that would require `addHero` to pick its way through the `<input>` DOM element,
     something we learned to dislike in our first try at a [keyup component](#keyup1).
   
  +  Mais cela aurait demandé à la méthode `addHero` d'aller naviguer dans l'élément DOM `<input>`, 
  +  ce qui est une mauvaise chose, comme nous l'avons appris dans notre première tentative de mettre en place
  +  un [composant détectant la relâche d'une touche](#keyup1).
  +
     Instead, we grab the input box *value* and pass *that* to `addHero`.
     The component knows nothing about HTML or the DOM, which is the way we like it.
   
  +  Au lieu de cela, nous avons récupéré la *valeur* du champ de saisie et nous l'avons passé à la méthode `addHero`.
  +  Le composant ne connaît rien à propos du HTML ou du DOM, ce qui est exactement ce que nous voulons.
  +
     ### Keep template statements simple
  +
  +  ### Garder les expressions dans le template simples
  +  
     We bound `(blur)` to *two* JavaScript statements.
  +
  +  Nous avons lié l'évènement `(blur)` sur *deux* expressions JavaScript.
   
     We like the first one, which calls `addHero`.
     We do not like the second one, which assigns an empty string to the input box value.
  +
  +  Nous préférons la première, qui appelle `addHero`, à la seconde, qui assigne une chaîne de caractères vide à la valeur du champ de saisie.
   
     The second statement exists for a good reason. We have to clear the input box after adding the new hero to the list.
     The component has no way to do that itself because it has no access to the
     input box (our design choice).
   
  +  La deuxième expression existe pour une bonne raison. Nous devons nettoyer le champ de saisie après avoir ajouté un nouvel héros à la liste.
  +  Le composant n'a aucun moyen de le faire lui même car il n'a pas accès au champ de saisie (notre choix de conception). 
  +
     Although the example *works*, we are rightly wary of JavaScript in HTML.
     Template statements are powerful. We're supposed to use them responsibly.
     Complex JavaScript in HTML is irresponsible.
   
  +  Bien que cet exemple *fonctionne*, nous devons,  à juste titre, nous méfier d'utiliser du code JavaScript dans du HTML.
  +  Les expressions dans les templates sont puissantes. Nous sommes supposés les utiliser de manière responsable.
  +  Du JavaScript complexe dans du HTML est irresponsable.
  +
     Should we reconsider our reluctance to pass the input box into the component?
   
  +  Devrions nous reconsidérer notre conception ? Et faire passer le champ de saisie au composant ?
  +
     There should be a better third way. And there is, as we'll see when we learn about `NgModel` in the [Forms](forms.html) chapter.
  +
  +  Il devrait y avoir une troisième alternative de meilleure qualité. Et il y en a bien une, comme nous le verrons quand nous découvrirons `NgModel` 
  +  de le chapitre sur les [formulaires](forms.html).
  +
   .l-main-section
   :marked
     ## Source code
   
  +  ## Code source
  +
     Here is all the code we talked about in this chapter.
  +
  +  Voici tout le code source que nous avons présenté dans ce chapitre.
  +
   +makeTabs(`
     user-input/ts/app/click-me.component.ts,
     user-input/ts/app/keyup.components.ts,
  
positive.code: :marked
    ## Summary
  
    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.
  
    Angular has a two-way binding called `NgModel`, which we'll learn about
    in the `Forms` chapter.
  
negative.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.
  
      Nous convertissons le type de `$event` en `any`, cela signifie que nous abandonnons le typage fort pour simplifier notre code.
      Nous préfèrerons généralement le typage fort qu'offre TypeScript.
      Nous pouvons réécrire cette méthode, en convertissant les objets du DOM HTML de la manière suivante.
    +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.
  
      <br>Le typage fort met en évidence un sérieux problème quand nous passons un évènement DOM à la méthode:
      trop de connaissance sur les détails du template, pas assez de séparation des problèmes.
  
      We'll address this problem in our next try at processing user keystrokes.
  
      Nous nous occuperons de ce problème dans notre prochaine tentative de traiter les saisies clavier de l'utilisateur.
  :marked
  
  .l-main-section
  :marked
    ## Get user input from a template reference variable
  
    ## Récupérer les saisies utilisateur depuis une variable référence du template
  
    There's another way to get the user data without the `$event` variable.
  
    Il existe une autre manière de récupérer les données utilisateur sans la variable `$event`.
  
    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 (#).
  
    Angular fournit une syntaxe particulière appelée [**variables de références dans un template**](./template-syntax.html#ref-vars).
    Ces variables fournissent un accés direct à un élément.
    Nous déclarons une variable de référence en préfixant un identifiant par le caractère dièse (#).
  
    Here's an example of using a template reference variable
    to implement a clever keystroke loopback in an ultra-simple template.
  
    Voici un exemple d'utilisation d'une variable de référence dans un template pour implémenter facilement
    une boucle de retour sur les saisies clavier dans un template simple.
  +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.
  