anchor.diff:    In this chapter we learn to bind to those events using the Angular
     event binding syntax.
   
  +  Quand l'utilisateur clique sur un lien, un bouton ou saisit du texte, nous voulons le savoir.
  +  Ces actions de l'utilisateur émettent toutes des évènements DOM.
  +  Dans ce chapitre nous allons apprendre comment se lier à ces évènements en utilisant la syntaxe 
  +  de liaison (binding) d'Angular.
  +
     [Run the live example](/resources/live-examples/user-input/ts/plnkr.html)
   
  +  [Exécuter l'exemple](/resources/live-examples/user-input/ts/plnkr.html)
  +
   :marked
     ## Binding to user input events
  +
  +  ## Liaison sur des évènements de saisie utilisateur
   
     We can use [Angular event bindings](./template-syntax.html#event-binding)
     to respond to [any DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
   
  +  Nous utilisons [une liaison d'évènement Angular](./template-syntax.html#event-binding)
  +  pour répondre à [chaque évènement DOM](https://developer.mozilla.org/fr/docs/Web/Events).
  +
     The syntax is simple. We surround the DOM event name in parentheses and assign a quoted template statement to it.
     As an example, here's an event binding that implements a click handler:
  +
  +  La syntaxe est simple. Nous entourons le nom de l'évènement DOM avec des parenthèses et lui assignons une expression de template entre guillemets.
  +  Par exemple, voici une liaison d'évènements qui implémente un gestionnaire de clic : 
   +makeExample('user-input/ts/app/click-me.component.ts', 'click-me-button')(format=".", language="html")
   
   <a id="click"></a>
  
positive.code:   respond to the click event by calling the component's `onClickMe` method. A [template statement](./template-syntax.html#template-statements) is a subset
    of JavaScript with restrictions and a few added tricks.
  
    When writing a binding we must be aware of a template statement's **execution context**.
    The identifiers appearing within a statement belong to a specific context object.
    That object is usually the Angular component that controls the template  ... which it definitely is
    in this case because that snippet of HTML belongs to the following component:
  
  +makeExample('user-input/ts/app/click-me.component.ts', 'click-me-component', 'app/click-me.component.ts')(format=".")
  :marked
    When the user clicks the button, Angular calls the component's `onClickMe` method.
  
  .l-main-section
  :marked
    ## Get user input from the $event object
    We can bind to all kinds of events. Let's bind to the keyup event of an input box and replay
    what the user types back onto the screen.
  
    This time we'll (1) listen to an event and (2) grab the user's input.
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-template', 'app/keyup.components.ts (template v.1)')(format=".")
  :marked
    Angular makes an event object available in the **`$event`** variable,
    which we pass to the component's `onKey()` method.
    The user data we want is in that variable somewhere.
  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-class-no-type', 'app/keyup.components.ts (class v.1)')(format=".")
  :marked
    The shape of the `$event` object is determined by whatever raises the event.
  
negative.code:   [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement), which
    has a `value` property that contains our user input data.
  
    La forme de l'objet `$event` est déterminée par ce qui a émis l'évènement.
    L'évènement `keyup` provient du DOM, donc `$event` est un [évènement DOM standard](https://developer.mozilla.org/fr/docs/Web/API/Event).
  
    The `onKey()` component method is where we extract the user's input
    from the event object, adding that input to the list of user data that we're accumulating in the component's `values` property.
    We then use [interpolation](./template-syntax.html#interpolation)
    to display the accumulating `values` property back on screen.
  
    La méthode `onKey()` du composant est là où nous récupérons les saisies utilisateur depuis l'objet représentant l'évènement, 
    et où nous ajoutons ces saisies à la liste des données utilisateurs que nous accumulons dans la propriété `values` du composant.
    Nous utilisons par la suite une [interpolation](./template-syntax.html#interpolation)
    pour afficher la propriété `values` à l'écran.
  
    Enter the letters "abc", and then backspace to remove them.
    Here's what the UI displays:
  
    Tapez les lettres "abc", et puis effacez les une par une.
    Voilà ce qu'affichera l'interface utilisateur:
  
  code-example().
    a | ab | abc | ab | a | |
  figure.image-display
  