anchor.diff:      doesn't express our intention well. 
       We can **alias** the `highlightColor` property with the attribute name by
       passing `myHighlight` into the `@Input` #{_decorator}:
  +
  +    Peut-être que nous ne voulons pas de ce nom de propriété dans la directive, car 
  +    il ne représente pas correctement notre intention.
  +    Nous pouvons créer un **alias** pour la propriété `highlightColor` avec le nom d'attribut en
  +    passant `myHighlight` dans le #{_décorateur} `@Input` :
     +makeExcerpt('app/highlight.directive.ts', 'color', '')
   :marked
     Now that we're getting the highlight color as an input, we modify the `onMouseEnter()` method to use
     it instead of the hard-coded color name.
     We also define red as the default color to fallback on in case
     the user neglects to bind with a color.
  +
  +  Maintenant que nous avons la couleur de surbrillance en tant qu'entrée (input), nous modifions la méthode `onMouseEnter()`
  +  pour qu'il l'utilise à la place du nom de couleur codé en dur.
  +  Nous définissons également le rouge en tant que couleur par défaut au cas où l'utilisateur 
  +  oublie de lier une couleur.
   +makeExcerpt('attribute-directives/ts/app/highlight.directive.ts', 'mouse-enter', '')
   :marked
     Now we'll update our `AppComponent` template to let 
     users pick the highlight color and bind their choice to our directive.
     
  +  Maintenant nous mettons à jour notre template `AppComponent` permettant
  +  aux utilisateurs de choisir la couleur de surbrillance et de la lier à notre directive.
  +
     Here is the updated template:
  +
  +  Voici notre template mis à jour :
   +makeExcerpt('attribute-directives/ts/app/app.component.html', 'v2', '')
   
   .l-sub-section
     :marked
       ### Where is the templated *color* property?
  +
  +    ### Où est la propriété *color* dans le template&nbsp;?
       
       The eagle-eyed may notice that the radio button click handlers in the template set a `color` property
       and we are binding that `color` to the directive. 
       We should expect to find a `color` on the host `AppComponent`.
  +
  +    Les plus attentifs remarqueront que l'événement click du radio bouton dans le template modifie une propriété
  +    `color` et nous lions cette `color` à la directive.
  +    Nous nous attendons à retrouver un `color` dans le host `AppComponent`.
       
       **We never defined a color property for the host *AppComponent***!
       And yet this code works. Where is the template `color` value going?
       
  +    **À aucun moment nous ne définissons la propriété `color` dans notre host *AppComponent***&nbsp;!
  +    Et ça fonctionne quand même. Où est donc passé la valeur `color` du template&nbsp;?
  +
       Browser debugging reveals that Angular dynamically added a `color` property 
       to the runtime instance of the `AppComponent`.
  +
  +    Le debuggeur du navigateur révèle que Angular ajoute dynamiquement une propriété `color`
  +    à l'instance d'exécution de l'`AppComponent`.
       
       This is *convenient* behavior but it is also *implicit* behavior that could be confusing. 
       While it's cool that this technique works, we recommend adding the `color` property to the `AppComponent`.
   
  +    C'est un comportement *avantageux* mais c'est aussi un comportement *implicite* qui peut porter à confusion.
  +    Même si cette technique qui fonctionne est cool, nous recommendons d'ajouter la propriété `color` au `AppComponent`.
  +
   :marked
     Here is our second version of the directive in action.
  +
  +  Voici notre seconde version de la direction en action.
   figure.image-display
     img(src="/resources/images/devguide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2")
   
   .l-main-section
   :marked
     ## Bind to a second property
  +  ## Lier une seconde propriété
     Our directive only has a single, customizable property. What if we had ***two properties***?
  +
  +  Notre directive ne dispose que d'une propriété personnalisable. Que faire si nous avions ***deux propriétés***&nbsp;?
     
     Let's allow the template developer to set the default color, the color that prevails until the user picks a highlight color.
     We'll add a second **input** property to `HighlightDirective` called `defaultColor`:
  +
  +  Laissons l'attribution de la couleur par défaut au développeur du template, qui prévaut tant que l'utilisateur
  +  n'a pas choisi de couleur de surbrillance. Nous ajouterons une seconde propriété **input** à la directive
  +  `HighlightDirective` qu'on appelera `defaultColor` :
   +makeExample('attribute-directives/ts/app/highlight.directive.ts', 'defaultColor')(format=".")
   :marked
     The `defaultColor` property has a setter that overrides the hard-coded default color, "red".
     We don't need a getter.
  +
  +  La propriété `defaultColor` possède un mutateur surchargeant la couleur par défaut "red" codé en dur.
  +  Nous n'avons pas besoin d'accesseur.
     
     How do we bind to it? We already "burned" the `myHighlight` attribute name as a binding target.
  +
  +  Comment la lie t'on&nbsp;? Nous avons déjà "transformé" le nom de l'attribut `myHighlight` en tant que cible liée.
     
     Remember that a *component is a directive too*. 
     We can add as many component property bindings as we need by stringing them along in the template
     as in this example that sets the `a`, `b`, `c` properties to the string literals 'a', 'b', and 'c'. 
  +
  +  Souvenez-vous qu'un *composant est aussi une directive*.
  +  Nous pouvons ajouter autant de propriétés que l'on a besoin en les passant sous forme de chaîne de caractères dans le template, 
  +  comme dans cet exemple qui définit les propriétés `a`, `b`, `c` par les chaînes de caractères 'a', 'b', et 'c'. 
   code-example(format="." ).
     &lt;my-component [a]="'a'" [b]="'b'" [c]="'c'">&lt;my-component>
   :marked
     We do the same thing with an attribute directive.
  +
  +  Nous appliquons le même changement avec une directive d'attribut.
   +makeExample('attribute-directives/ts/app/app.component.html', 'defaultColor')(format=".")
   :marked
     Here we're binding the user's color choice to the `myHighlight` attribute as we did before.
     We're *also* binding the literal string, 'violet', to the `defaultColor`.
  +
  +  Ici nous lions le choix de la couleur de l'utilisateur sur l'attribut `myHighlight`, comme nous l'avons fait précédemment.
  +  Nous avons *aussi* lié la chaîne de caractères 'violet' sur `defaultColor`.  
       
     Here is the final version of the directive in action.
  +
  +  Voici la version finale de la directive en action.
   figure.image-display
     img(src="/resources/images/devguide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight")
   
   .l-main-section
   :marked
     ## Summary
  +  ## Résumé
     We now know how to
  +
  +  Maintenant nous savons 
     - [build a simple **attribute directive** to attach behavior to an HTML element](#write-directive),
  +  - [construire une simple **directive d'attribut** qui ajoute un comportement à un élément HTML](#write-directive),
     - [use that directive in a template](#apply-directive),
  +  - [utiliser cette directive dans un template](#apply-directive),
     - [respond to **events** to change behavior based on an event](#respond-to-user),
  +  - [réagir aux **événements** modifiant le comportement basé sur un événement](#respond-to-user),
     - and [use **binding** to pass values to the attribute directive](#bindings).
  +  - et [utiliser la **liaison de données** pour transmettre des valeurs à notre directive d'attribut](#bindings).
   
     The final source:
  +
  +  Les sources finales :
   
   +makeTabs(
     `attribute-directives/ts/app/app.component.ts,
  
positive.code:   through its `nativeElement` property.
    That's all we need to set the element's background color using the browser DOM API.
  
  .l-main-section
  a#apply-directive
  :marked
    ## Apply the attribute directive
    The `AppComponent` in this sample is a test harness for our `HighlightDirective`.
    Let's give it a new template that 
    applies the directive as an attribute to a paragraph (`p`) element.
    In Angular terms, the `<p>` element will be the attribute **host**.
  p
    | We'll put the template in its own 
    code #[+adjExPath('app.component.html')]
    | file that looks like this:
  +makeExample('attribute-directives/ts/app/app.component.1.html',null,'app/app.component.html')(format=".")
  :marked
    A separate template file is clearly overkill for a 2-line template. 
    Hang in there; we're going to expand it later.
    Meanwhile, we'll revise the `AppComponent` to reference this template.
  +makeExample('attribute-directives/ts/app/app.component.ts',null,'app/app.component.ts')
  :marked
    We've added an `import` statement to fetch the 'Highlight' directive and, 
    added that class to a `directives` component metadata so that Angular 
    will recognize our directive when it encounters `myHighlight` in the template. 
  
    We run the app and see that our directive highlights the paragraph text.
    
  figure.image-display
    img(src="/resources/images/devguide/attribute-directives/first-highlight.png" alt="First Highlight")
  .l-sub-section
    :marked
      ### Your directive isn't working? 
  
      Did you remember to set the `directives` attribute of `@Component`? It is easy to forget!
      
      Open the console in the browser tools and look for an error like this:
    code-example(format="nocode").
      EXCEPTION: Template parse errors:
        Can't bind to 'myHighlight' since it isn't a known native property
    :marked
      Angular detects that we're trying to bind to *something* but it doesn't know what.
      We have to tell it by listing `HighlightDirective` in the `directives` metadata array.
  :marked
    Let's recap what happened.
    
    Angular found the `myHighlight` attribute on the `<p>` element. It created
    an instance of the `HighlightDirective` class, 
    injecting a reference to the element into the constructor 
    where we set the `<p>` element's background style to yellow.
  
  .l-main-section
  a#respond-to-user
  :marked
    ## Respond to user action
  
    We are not satisfied to simply set an element color.
    Our directive should set the color in response to a user action.
    Specifically, we want to set the color when the user hovers over an element.
    
    We'll need to
    1. detect when the user hovers into and out of the element,
    2. respond to those actions by setting and clearing the highlight color, respectively.
    
    We apply the `@HostListener` !{_decorator} to methods which are called when an event is raised.
  
  +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','host')(format=".")
  
  .l-sub-section
    :marked
      The `@HostListener` !{_decorator} refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
       
      We could have attached event listeners by manipulating the host DOM element directly, but
      there are at least three problems with such an approach:
      
      1. We have to write the listeners correctly.
      1. We must *detach* our listener when the directive is destroyed to avoid memory leaks.
      1. We'd be talking to DOM API directly which, we learned, is something to avoid.
  
      Let's roll with the `@HostListener` !{_decorator}. 
  :marked
    Now we implement the two mouse event handlers:
  +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','mouse-methods')(format=".")
  :marked
    Notice that they delegate to a helper method that sets the color via a private local variable, `#{_priv}el`.
    We revise the constructor to capture the `ElementRef.nativeElement` in this variable.
  
  +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','ctor')(format=".")
  :marked
    Here's the updated directive:
  +makeExample('app/highlight.directive.2.ts')
  :marked
    We run the app and confirm that the background color appears as we move the mouse over the `p` and
    disappears as we move out.
  figure.image-display
    img(src="/resources/images/devguide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight")
  .l-main-section
  a#bindings
  :marked
    ## Configure the directive with binding
    
    Currently the highlight color is hard-coded within the directive. That's inflexible.
    We should set the color externally with a binding like this:
  +makeExample('attribute-directives/ts/app/app.component.html','pHost')
  :marked
    We'll extend our directive class with a bindable **input** `highlightColor` property and use it when we highlight text.
  
    Here is the final version of the class:
  +makeExcerpt('app/highlight.directive.ts', 'class')
  a#input
  :marked
    The new `highlightColor` property is called an *input* property because data flows from the binding expression into our directive.
    Notice the `@Input()` #{_decorator} applied to the property.
  +makeExcerpt('app/highlight.directive.ts', 'color')
  :marked
    `@Input` adds metadata to the class that makes the `highlightColor` property available for 
    property binding under the `myHighlight` alias. 
    We must add this input metadata or Angular will reject the binding.
    See the [appendix](#why-input) below to learn why.
  .l-sub-section
    :marked
      ### @Input(_alias_) 
      The developer who uses this directive expects to bind to the attribute name, `myHighlight`.
      The directive property name is `highlightColor`. That's a disconnect.
      
      We could resolve the discrepancy by renaming the property to `myHighlight` and define it as follows:
  
    +makeExcerpt('app/highlight.directive.ts', 'highlight', '')
    :marked
  
negative.code: :marked
    An **Attribute** directive changes the appearance or behavior of a DOM element.
  
    Une directive d'**Attribut** modifie l'apparence ou le comportement d'un élément DOM.
  
  :marked
    In this chapter we will
  
    Dans ce chapitre nous allons
    * [write an attribute directive to change the background color](#write-directive)
    * [Écrire une directive d'attribut qui change la couleur de l'arrière-plan](#write-directive)
    * [apply the attribute directive to an element in a template](#apply-directive)
    * [Appliquer la directive d'attribut sur un élément d'un template](#apply-directive)
    * [respond to user-initiated events](#respond-to-user)
    * [Réagir à un événement de l'utilisateur](#respond-to-user)
    * [pass values into the directive using data binding](#bindings)
    * [Transmettre des valeurs à notre directive grâce à la liaison de données](#bindings)
  
    Try the <live-example></live-example>.
  
    Essayez la <live-example>démo</live-example>.
  
    ## Directives overview
    ## Aperçu des Directives
    
    There are three kinds of directives in Angular:
    
    Il y a 3 sortes de directives en Angular :
    1. Components
    1. Les composants (_Components_)
    1. Structural directives  
    1. Les directives structurelles  
    1. Attribute directives
    1. Les directives d'attributs
  
    A *Component* is really a directive with a template. 
    It's the most common of the three directives and we tend to write lots of them as we build applications.
  
    Un *Composant* n'est qu'une directive avec un template.
    C'est la directive la plus utilisée et nous avons tendance à en écrire beaucoup dans nos applications.
  
    [*Structural* directives](structural-directives.html) can change the DOM layout by adding and removing DOM elements. 
    [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf) are two familiar examples.
  
    [Les directives *Structurelles*](structural-directives.html) peuvent modifier le DOM en ajoutant ou supprimant des éléments DOM.
    [NgFor](template-syntax.html#ngFor) et [NgIf](template-syntax.html#ngIf) sont les exemples les plus connus.
    
    An *Attribute* directive can change the appearance or behavior of an element.
    The built-in [NgStyle](template-syntax.html#ngStyle) directive, for example,
    can change several element styles at the same time.
  
    Une directive *d'Attribut* peut changer l'apparence ou le comportement d'un élément.
    Par exemple, la directive intégrée (dans le framework) [NgStyle](template-syntax.html#ngStyle)
    peut modifier plusieurs styles en même temps.
    
    We are going to write our own attribute directive to set an element's background color
    when the user hovers over that element.
  
    Nous allons écrire notre propre directive d'attribut, qui modifie la couleur de l'arrière-plan,
    quand l'utilisateur survolera cet élément.
  
  .l-sub-section
    :marked
      We don't need *any* directive to simply set the background color.
      We can set it with the special [Style Binding](template-syntax.html#style-binding) like this:
  
      Nous n'avons besoin d'*aucune* directive pour modifier la couleur d'arrière-plan.
      Nous pouvons la modifier avec [une liaison spéciale de style (Style Binding)](template-syntax.html#style-binding) comme ceci :
    +makeExample('attribute-directives/ts/app/app.component.1.html','p-style-background')
  
    :marked
      That wouldn't be nearly as much fun as creating our own directive.
  
      Ça ne serait pas aussi marrant que de créer notre propre directive.
      
      Besides, we're not just *setting* the color; we'll be *changing* the color
      in response to a user action, a mouse hover.
  
      Mais au final, nous ne faisons que *paramétrer* une couleur; nous voulons *changer* la couleur
      au travers d'une action de l'utilisateur, par un survol de la souris. 
  
  .l-main-section
  a#write-directive
  :marked
    ## Build a simple attribute directive
    ## Écrire une simple directive d'attribut
  
    An attribute directive minimally requires building a controller class annotated with 
    `@Directive`, which specifies the selector identifying
    the attribute associated with the directive. 
    The controller class implements the desired directive behavior.
    
    Une directive d'attribut requiert au minimum de construire un contrôleur annotée avec 
    `@Directive`, spécifiant le sélecteur (selector) qui identifie l'attribut associé à notre directive. 
    Un contrôleur implémente le comportement de la directive souhaitée.
  
    Let's build a small illustrative example together.
  
    Écrivons un petit exemple ensemble.
  
  :marked
    ### Our first draft
    ### Notre premier essai
  
    Create a new project folder (`attribute-directives`) and follow the steps in the [QuickStart](../quickstart.html).
  
    Créez un nouveau dossier (`attribute-directives`) et suivez les étapes du [QuickStart](../quickstart.html).
  
  include ../_quickstart_repo
  :marked
    Create the following source file in the indicated folder with the given code:
  
    Créez les fichiers suivants dans les dossiers indiqués avec ce code :
  
  +makeExample('app/highlight.directive.1.ts')
  
  block highlight-directive-1
  