anchor.diff:  .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.
  
positive.code:   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`. 
  .l-sub-section
    :marked
      ### Why not call it "highlight"?
      *highlight* is a nicer name than *myHighlight* and, technically, it would work if we called it that.
   
      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.
  
      We do **not** prefix our `highlight` directive name with **`ng`**.
      That prefix belongs to Angular.
  
      We need a prefix of our own, preferably short, and `my` will do for now.
  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.
  :marked
    Angular creates a new instance of the directive's controller class for
    each matching element, injecting an Angular `ElementRef` 
  
negative.code:   through its `nativeElement` property.
    That's all we need to set the element's background color using the browser DOM API.
  
    Angular créé une nouvelle instance du contrôleur de la directive pour chaque élement trouvé et injecte un `ElementRef`
    d'Angular.
    `ElementRef` est un service qui nous garantit un accès aux éléments du DOM
    au travers de sa propriété `nativeElement`.
    C'est tout ce dont on a besoin pour modifier l'élément de la couleur de l'arrière-plan avec l'API DOM du navigateur.
  
  .l-main-section
  a#apply-directive
  :marked
    ## Apply the attribute directive
    ## Appliquer la directive d'attribut
    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**.
  
    Dans notre exemple, le `AppComponent` a été simplifié pour notre `HighlightDirective`.
    Donnons lui un nouveau template qui appliquera la directive en tant qu'attribut d'un élément de paragraphe (`p`).
    Selon les termes Angular, l'élement `<p>` sera l'attribut **host**.
  p
    | We'll put the template in its own 
    code #[+adjExPath('app.component.html')]
    | file that looks like this:
  p
    | Nous allons ajouter le template dans son propre fichier 
    code #[+adjExPath('app.component.html')]
    | qui ressemble à ceci :
  +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.
  
    Évidemment, 2 lignes pour un fichier template est exagéré.
    Patience; nous allons le développer plus tard.
    En attendant, nous allons remanier `AppComponent` pour qu'il référence ce 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. 
  
    Nous avons ajouté une déclaration `import` pour récupérer la directive 'Highlight' et
    ajouté dans une metadata `directives` du composant pour que Angular
    puisse reconnaître notre directive quand il rencontrera `myHighlight` dans le template.
  
    We run the app and see that our directive highlights the paragraph text.
  
    Nous lançons l'application et constatons que notre directive surbrille le paragraphe.
    
  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? 
      ### Votre directive ne fonctionne pas&nbsp;? 
  
      Did you remember to set the `directives` attribute of `@Component`? It is easy to forget!
  
      Avez-vous pensé à définir l'attribut `directives` du `@Component`&nbsp;? C'est facile de l'oublier&nbsp;!
      
      Open the console in the browser tools and look for an error like this:
      
      Ouvrez la console du navigateur et cherchez si vous avez une erreur telle que : 
    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.
  
      Angular détecte que nous essayons de lier *quelque chose* mais il ne sait pas quoi.
      Nous devons le lui préciser en listant `HighlightDirective` dans le tableau de la metadata `directives`.
  :marked
    Let's recap what happened.
  
    Récapitulons ce qu'il se passe.
    
    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.
  
    Angular détecte l'attribut `myHighlight` sur l'élément `<p>`. Il créé 
    une instance de la classe `HighlightDirective`, 
    injecte une référence de l'élement dans le constructeur
    où nous appliquons le style d'arrière-plan de l'élement `<p>` à jaune.
  
  .l-main-section
  a#respond-to-user
  :marked
    ## Respond to user action
  
    ## Réagir à un événement de l'utilisateur
  
    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.
  
    Nous ne sommes pas satisfait de simplement modifier la couleur de l'élément.
    Notre directive devrait modifier la couleur en réponse à une action de l'utilisateur.
    Plus précisément, nous voulons modifier la couleur quand l'utilisateur survole un élément.
    
    We'll need to
    
    Nous devrons
  
    1. detect when the user hovers into and out of the element,
    1. détecter quand l'utilisateur survole et ne survole plus l'élément,
    2. respond to those actions by setting and clearing the highlight color, respectively.
    2. réagir à ces actions en appliquant/supprimant respectivement la surbrillance.
    
    We apply the `@HostListener` !{_decorator} to methods which are called when an event is raised.
  
    Nous appliquons le !{_décorateur} `@HostListener` aux méthodes lancées quand un événement est levé.
  
  +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.
  
      Le !{_décorateur} `@HostListener` se réfère à l'élément du DOM qui contient (_host_) notre attribut de directive, le `<p>` dans notre cas.
       
      We could have attached event listeners by manipulating the host DOM element directly, but
      there are at least three problems with such an approach:
  
      Nous aurions pu attacher les écoutes d'événements (_event listeners_) en manipulant le DOM du contenant (host) directement, 
      mais il y a au moins trois problèmes avec une telle approche :
      
      1. We have to write the listeners correctly.
      1. Nous devons écrire les écouteurs (_listeners_) correctement.
      1. We must *detach* our listener when the directive is destroyed to avoid memory leaks.
      1. Nous devons *détacher* nos écouteurs quand la directive est détruire afin d'éviter les fuites de mémoire.
      1. We'd be talking to DOM API directly which, we learned, is something to avoid.
      1. Nous communiquerions directement avec l'API du DOM ce qui, nous l'avons appris, est quelque chose à éviter.
  
      Let's roll with the `@HostListener` !{_decorator}. 
  
      Faisons tourner le !{_décorateur} `@HostListener`. 
  :marked
    Now we implement the two mouse event handlers:
  
    À présent nous implémentons les deux fonctions de gestion d'événement (_event handlers_) de la souris :
  +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.
  
    Remarquez qu'ils délèguent à une méthode d'assistance (helper method) qui définit la couleur au travers de 
    la variable locale privée `#{_priv}el`
    Nous modifions le constructor afin de récupérer `ElementRef.nativeElement` dans cette variable.
  
  +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','ctor')(format=".")
  :marked
    Here's the updated directive:
  
    Voici la directive mise à jour :
  +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.
  
    Nous lançons l'application et confirmons que la couleur de l'arrière-plan apparaît quand on survole le `p` et 
    disparaît quand on en sort.
  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
    ## Configurer la directive avec des liaisons de données
    
    Currently the highlight color is hard-coded within the directive. That's inflexible.
    We should set the color externally with a binding like this:
  
    Jusqu'à présent, la surbrillance est codée en dur dans la directive. Cette manière de faire est rigide.
    Nous devons définir la couleur de l'extérieur avec une liaison de données comme ceci : 
  +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.
  
    Nous allons étendre notre classe de directive avec une propriété "liante" **input** `highlightColor` et l'utiliser 
    quand on surbrille le texte.
  
    Here is the final version of the class:
  
    Voici la version finale de la classe :
  +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.
  
    La nouvelle propriété `highlightColor` est appelée *input* parce que les données sont transmises à notre directive grâce à l'expression de la liaison de données.
    Remarquez que le #{_décorateur} `@Input()` s'applique sur la propriété.
  +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.
  
    `@Input` ajoute des metadata à la classe rendant accessible par liaison de données la propriété `highlightColor`
    en dessous de l'alias `myHighlight`.
    Nous devons ajouter cette entrée de metadata ou sinon Angular rejettera la liaison de données.
    Voir l'[annexe](#why-input) ci-dessous pour savoir pourquoi.
  .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.
  
      Le développeur qui utilise cette directive s'attend à lier une valeur avec l'attribut `myHighlight`.
      La nom de propriété de la directive est `highlightColor`. Ce n'est pas très cohérent.
      
      We could resolve the discrepancy by renaming the property to `myHighlight` and define it as follows:
  
      Nous pouvons résoudre cette incohérence en renommant la propriété `myHighlight` ainsi :
  
    +makeExcerpt('app/highlight.directive.ts', 'highlight', '')
    :marked
  