anchor.diff:    is the attribute name in square brackets.
     Our directive's selector is `[myHighlight]`. 
     Angular will locate all elements in the template that have an attribute named `myHighlight`. 
  +  
  +  `@Directive` requiert un sélecteur CSS pour qu'il identifie le HTML du template
  +  qui est associé à notre directive. 
  +  Le [sélecteur CSS d'un attribut](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
  +  est le nom de l'attribut entouré par des crochets.
  +  Notre sélecteur de directive est `[myHighlight]`.
  +  Angular va localiser tous les éléments dans le template possédant un attribut appelé `myHighlight`.
  +
   .l-sub-section
     :marked
       ### Why not call it "highlight"?
  +
  +    ### Pourquoi ne pas l'avoir appelé "highlight" (surbrillance)&nbsp;?
  +    
       *highlight* is a nicer name than *myHighlight* and, technically, it would work if we called it that.
  +    
  +    *highlight* est un nom plus convenable que *myHighlight* et qui, techniquement, fonctionnerait tout autant.
    
       However, we recommend picking a selector name with a prefix to ensure
       that it cannot conflict with any standard HTML attribute, now or in the future.
       There is also less risk of colliding with a third-party directive name when we give ours a prefix.
  +    
  +    Cependant, nous recommendons de choisir un nom de sélecteur préfixé assurant
  +    aucun conflit avec tous les attributs du standard HTML, maintenant ou à l'avenir.
  +    Cela apporte moins de risques de collision avec le nom d'une directive tierce d'avoir son propre préfixe.
   
       We do **not** prefix our `highlight` directive name with **`ng`**.
       That prefix belongs to Angular.
   
  +    Nous ne préfixons **pas** le nom de notre directive `highlight` avec **`ng`**.
  +    Ce préfixe est utilisé par Angular.
  +
       We need a prefix of our own, preferably short, and `my` will do for now.
  +
  +    Nous avons besoin d'avoir notre propre préfixe, de préférence court, et `my` fera l'affaire pour le moment.
  +
   p
     | After the #[code @Directive] metadata comes the directive's controller class, which contains the logic for the directive. 
     +ifDocsFor('ts')
       | We export `HighlightDirective` to make it accessible to other components.
  +p
  +  | La metadata #[code @Directive] est suivie par le contrôleur de la directive, qui contient la logique de la directive.
  +  +ifDocsFor('ts')
  +    | Nous exportons `HighlightDirective` afin de le rendre accessible aux autres composants.
  +
   :marked
     Angular creates a new instance of the directive's controller class for
     each matching element, injecting an Angular `ElementRef` 
  
positive.code:     doesn't express our intention well. 
      We can **alias** the `highlightColor` property with the attribute name by
      passing `myHighlight` into the `@Input` #{_decorator}:
    +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.
  +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.
    
    Here is the updated template:
  +makeExcerpt('attribute-directives/ts/app/app.component.html', 'v2', '')
  
  .l-sub-section
    :marked
      ### Where is the templated *color* property?
      
      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`.
      
      **We never defined a color property for the host *AppComponent***!
      And yet this code works. Where is the template `color` value going?
      
      Browser debugging reveals that Angular dynamically added a `color` property 
      to the runtime instance of the `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`.
  
  :marked
    Here is our second version of the directive in 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
    Our directive only has a single, customizable property. What if we had ***two properties***?
    
    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`:
  +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.
    
    How do we bind to it? We already "burned" the `myHighlight` attribute name as a binding target.
    
    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'. 
  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.
  +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`.
      
    Here is the final version of the directive in action.
  figure.image-display
    img(src="/resources/images/devguide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight")
  
  .l-main-section
  :marked
    ## Summary
    We now know how to
    - [build a simple **attribute directive** to attach behavior to an HTML element](#write-directive),
    - [use that directive in a template](#apply-directive),
    - [respond to **events** to change behavior based on an event](#respond-to-user),
    - and [use **binding** to pass values to the attribute directive](#bindings).
  
    The final source:
  
  +makeTabs(
    `attribute-directives/ts/app/app.component.ts,
  
negative.code: .l-main-section
  :marked
    ### Appendix: Input properties
    ### Annexe : Propriétés de Input
    
    Earlier we declared the `highlightColor` property to be an ***input*** property of our
    `HighlightDirective`
  
    Plus tôt nous avons déclaré la propriété `highlightColor` en tant que propriété ***input*** de
    notre `HighlightDirective`
   
    We've seen properties in bindings before. 
    We never had to declare them as anything. Why now?
  
    Nous avons vu des propriété dans les liaisons de données précédemment.
    Nous n'avons jamais eu à les déclarer. Comment est-ce possible&nbsp;?
    
    Angular makes a subtle but important distinction between binding **sources** and **targets**.
  
    Angular fait une subtile mais importante distinction entre la liaison de données **source** et **cible** (target) .
    
    In all previous bindings, the directive or component property was a binding ***source***.
    A property is a *source* if it appears in the template expression to the ***right*** of the equals (=).
  
    Dans tous les précédentes liaisons de données, la propriété de la directive ou du composant était une liaison ***source***.
    Une propriété est dite *source* si elle apparaît dans l'expression du template à ***droite*** du égal (=).
    
    A property is a *target* when it appears in **square brackets** ([ ]) to the **left** of the equals (=) ...
    as it is does when we bind to the `myHighlight` property of the `HighlightDirective`, 
  
    Une propriété est dite *cible* quand elle apparaît dans des **crochets** ([ ]), à **gauche** du égal (=) ...
    comme quand on a lié la propriété `myHighlight` à la directive `HighlightDirective`,
  +makeExample('attribute-directives/ts/app/app.component.html','pHost')(format=".")
  :marked
    The 'color' in `[myHighlight]="color"` is a binding ***source***.
    A source property doesn't require a declaration.
  
    Le 'color' dans `[myHighlight]="color"` est une liaison ***source***.
    Une propriété source ne requiert pas d'être déclaré.
    
    The 'myHighlight' in `[myHighlight]="color"` *is* a binding ***target***.
    We must declare it as an *input* property.
    Angular rejects the binding with a clear error if we don't.
  
    'myHighlight' dans `[myHighlight]="color"` *est* une liaison ***cible***.
    Nous devons la déclarer en tant que propriété *input*.
    Angular rejette la liaison avec une erreur claire si nous ne le faisons pas.
    
    Angular treats a *target* property differently for a good reason.
    A component or directive in target position needs protection.
  
    Angular traite une propriété *cible* différemment pour une bonne raison.
    Un composant ou une directive dans une position cible nécessite une protection.
    
    Imagine that our `HighlightDirective` did truly wonderous things.
    We graciously made a gift of it to the world. 
  
    Imaginez que notre `HighlightDirective` fasse vraiment des choses merveilleuses.
    Nous l'offrons gracieusement à tout le monde.
    
    To our surprise, some people &mdash; perhaps naively &mdash;
    started binding to *every* property of our directive. 
    Not just the one or two properties we expected them to target. *Every* property.
    That could really mess up our directive in ways we didn't anticipate and have no desire to support.
  
    À notre grande surprise, des personnes &mdash; peut-être naïvement &mdash;
    ont commencé à lier *toutes* les propriétés de notre directive.
    Pas seulement une ou deux propriétés comme escompté. *Toutes* les propriétés.
    Cette pratique peut gâcher notre directive, d'une manière que nous n'avons pas anticipé et que nous n'avons pas envie de maintenir.
    
    The *input* declaration ensures that consumers of our directive can only bind to
    the properties of our public API ... nothing else.
  
    La déclaration *input* garantie que les utilisateurs de notre directive peuvent uniquement lier 
    les propriétés de notre API publique ... rien d'autres.
  