anchor.diff:    :marked
       The tell-tale signs of *content projection* are (a) HTML between component element tags
       and (b) the presence of `<ng-content>` tags in the component's template.
  +
  +    Les signes avant-coureurs de *projection de contenu* sont (a) du HTML entre les tags du composant 
  +    et (b) la présence de tags `<ng-content>` dans le modèle du composant.
  +
   :marked
     ### AfterContent hooks
  +
  +  ### Hooks AfterContent
  +
     *AfterContent* hooks are similar to the *AfterView* hooks. The key difference is the kind of child component
     that we're looking for. 
  +
  +  Les hooks *AfterContent* sont similaires aux hooks *AfterView*. La différence principale est le type 
  +  de composant fils que nous voulons examiner.
     
     * The *AfterView* hooks concern `ViewChildren`, the child components whose element tags
     appear *within* the component's template.
     
  +  * Les hooks *AfterView* concernent `ViewChildren`, les composants fils dont les tags apparaissent 
  +  dans le modèle du composant.
  +
     * The *AfterContent* hooks concern `ContentChildren`, the child components that Angular
     projected into the component.
  -  
  +
  +  * Les hooks *AfterContent* concernent `ContentChildren`, les composants fils projetés par Angular dans le composant.
  +
     The following *AfterContent* hooks take action based on changing values in a  *content child*
     which we can only reach by querying for it via the property decorated with 
     [@ContentChild](../api/core/index/ContentChild-var.html).
   
  +  Les hooks *AfterContent* qui suivent sont activés selon les changements de valeurs dans un *contenu fils*
  +  que nous pouvons uniquement atteindre à travers la propriété décorée par
  +  [@ContentChild](../api/core/index/ContentChild-var.html).
  +
  +
   +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".")
   
   :marked
      ### No unidirectional flow worries
      
  +   ### Pas de contrainte de flux unidirectionnel
  +
      This component's `doSomething` method update's the component's data-bound `comment` property immediately.
      There's no [need to wait](#wait-a-tick). 
  -   
  +
  +   Cette méthode de composant `doSomething` met à jour immédiatement la propriété de composant `comment` liée. 
  +   Il n'est pas [nécessaire d'attendre](#wait-a-tick).
  +
      Recall that Angular calls both *AfterContent* hooks before calling either of the *AfterView* hooks.
      Angular completes composition of the projected content *before* finishing the composition of this component's view.
      We still have a window of opportunity to modify that view.
  +
  +   Souvenez-vous qu'Angular appelle les deux hooks *AfterContent* avant d'appeler un des hooks *AfterView*.
  +   Angular termine la composition du contenu projeté *avant* de finir la composition de la vue du composant.
  +   Nous avons toujours l'opportunité de modifier cette vue.
  
positive.code:   The *AfterContent* sample explores the `AfterContentInit` and `AfterContentChecked` hooks that Angular calls
    *after* Angular projects external content into the component.
    
    ### Content projection
    *Content projection* is a way to import HTML content from outside the component and insert that content
    into the component's template in a designated spot.
   
  .l-sub-section
    :marked
      Angular 1 developers know this technique as *transclusion*.
    
  :marked
    We'll illustrate with a variation on the [previous](#afterview) example 
    whose behavior and output is almost the same.
    
    This time, instead of including the child view within the template, we'll import it from
    the `AfterContentComponent`'s parent. Here's the parent's template.
  +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'parent-template', 'AfterContentParentComponent (template excerpt)')(format=".")
  :marked
    Notice that the `<my-child>` tag is tucked between the `<after-content>` tags.
    We never put content between a component's element tags *unless we intend to project that content
    into the component*.
    
    Now look at the component's template:
  +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'template', 'AfterContentComponent (template)')(format=".")
  :marked
    The `<ng-content>` tag is a *placeholder* for the external content. 
    They tell Angular where to insert that content.
    In this case, the projected content is the `<my-child>` from the parent.
  figure.image-display
    img(src='/resources/images/devguide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content")
  :marked
  
negative.code: 
  :marked
    # Component Lifecycle
  
    # Cycle de vie d'un composant
  
    A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children,
    checks it when its data-bound properties change, and destroys it before removing it from the DOM.
  
    Un composant a un cycle de vie géré par Angular lui-même. Angular le crée, l'affiche, crée et affiche ses fils, l'actualise
    lorsque des propriétés liées changent et le détruit avant de le supprimer du DOM.
  
    Angular offers **component lifecycle hooks**
    that give us visibility into these key moments and the ability to act when they occur.
  
    Angular offre des **hooks dans le cycle de vie d'un composant** qui nous donnent de la visibilité sur ces moments-clés 
    et la possibilité d'agir lorsqu'ils arrivent.
  
    We cover these hooks in this chapter and demonstrate how they work in code.
  
    Nous traitons ces hooks dans ce chapitre et décrivons comment ils fonctionnent au niveau du code. 
  
    * [The lifecycle hooks](#hooks-overview)
    * [Les hooks de cycle de vie](#hooks-overview)
    * [The hook-call sequence](#hook-sequence)
    * [La séquence d'appel des hooks](#hook-sequence)
    * [Other Angular lifecycle hooks](#other-lifecycles)
    * [Autres hooks de cycle de vie d'Angular](#other-lifecycles)
    * [The lifecycle sample](#the-sample)
    * [Exemple de cycle de vie](#the-sample)
      * [All](#peek-a-boo)
      * [Tous](#peek-a-boo)
      * [Spying OnInit and OnDestroy](#spy) 
      * [Espionner OnInit et OnDestroy](#spy)
      * [OnChanges](#onchanges)
      * [OnChanges](#onchanges)
      * [DoCheck](#docheck)
      * [DoCheck](#docheck)
      * [AfterViewInit and AfterViewChecked](#afterview)
      * [AfterViewInit et AfterViewChecked](#afterview)
      * [AfterContentInit and AfterContentChecked](#aftercontent)
      * [AfterContentInit et AfterContentChecked](#aftercontent)
  
    Essayez le <live-example></live-example>.
  
  a#hooks-overview
  .l-main-section
  :marked
    ## Component lifecycle Hooks
  
    ## Hooks de cycle de vie d'un composant
  
    Directive and component instances have a lifecycle
    as Angular creates, updates, and destroys them.
  
    Les instances de directives et de composants ont un cycle de vie, Angular les créant, les mettant à jour
    et les détruisant.
  
    Developers can tap into key moments in that lifecycle by implementing
    one or more of the *Lifecycle Hook* interfaces in the Angular `core` library.
    
    Les développeurs peuvent intervenir dans les moments-clés de ce cycle de vie en implémentant
    une ou plusieurs interfaces de *hook de cycle de vie* de la bibliothèque `core` d'Angular.
  
    Each interface has a single hook method whose name is the interface name prefixed with `ng`.
    For example, the `OnInit` interface has a hook method named `ngOnInit`.
    We might implement it in a component class like this:
  
    Chaque interface a une unique méthode hook dont le nom est le nom de l'interface préfixé par `ng`.
    Par exemple, l'interface `OnInit` a une méthode hook appelée `ngOnInit`.
    Nous pouvons l'implémenter dans une classe de composant de cette manière&nbsp;:
  
  +makeExample('lifecycle-hooks/ts/app/peek-a-boo.component.ts', 'ngOnInit', 'peek-a-boo.component.ts (excerpt)')(format='.')
  :marked
    No directive or component will implement all of them and some of the hooks only make sense for components.
    Angular only calls a directive/component hook method *if it is defined*.
  
    Aucune directive ou aucun composant n'implémentera toutes ces interfaces et certains des hooks n'ont de sens que pour des composants.
    Angular appelle uniquement une méthode hook de directive/composant *si elle est définie*.
  
  block optional-interfaces
    .l-sub-section
      :marked
        ### Interface optional?
  
        ### Interface optionnelle&nbsp;?
  
        The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
        The JavaScript language doesn't have interfaces. 
        Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
  
        Les interfaces sont optionnelles pour les développeurs JavaScript et TypeScript d'un point de vue purement technique.
        Le langage JavaScript n'a pas d'interfaces.
        Angular ne peut pas voir les interfaces TypeScript à l'exécution car elles disparaissent dans le JavaScript transpilé.
  
        Fortunately, they aren't necessary.
        We don't have to add the lifecycle hook interfaces to our directives and components to benefit from the hooks themselves.
  
        Heureusement, elles ne sont pas nécessaires.
        Nous n'avons pas à ajouter les interfaces hook de cycle de vie à nos directives et composants pour bénéficier des hooks eux-mêmes.
  
        Angular instead inspects our directive and component classes and calls the hook methods *if they are defined*.
        Angular will find and call methods like `ngOnInit()`, with or without the interfaces.
  
        En effet, Angular inspecte les classes de nos directives et composants et appelle les méthodes hook *si elles sont définies*.
        Angular trouvera et appelera les méthodes comme `ngOnInit()`, avec ou sans les interfaces.
  
        Nonetheless, we strongly recommend adding interfaces to TypeScript directive classes
        in order to benefit from strong typing and editor tooling.  
  
        Toutefois, nous recommandons fortement d'ajouter les interfaces aux classes de directives et composants TypeScript 
        afin de bénéficier du typage fort et des outils d'édition.
  
  :marked
    Here are the component lifecycle hook methods:
  
    Voici les méthodes hook de cycle de vie d'un composant&nbsp;:
  
    ### Directives and Components
  
    ### Directives et Composants
  
  table(width="100%")
    col(width="20%")
    col(width="80%") 
    tr
      th Hook
      th Purpose       
    tr(style=top)
      td ngOnInit
      td
        :marked
          Initialize the directive/component after Angular initializes the data-bound input properties.
  
          Permet d'initialiser la directive ou le composant après l'initialisation par Angular des propriétés d'entrée liées.
    tr(style=top)
      td ngOnChanges
      td
        :marked
          Respond after Angular sets a data-bound input property. 
          The method receives a `changes` object of current and previous values.
  
          Permet de réagir après la modification par Angular d'une propriété d'entrée liée. 
          La méthode reçoit un objet `changes` avec les valeurs actuelles et précédentes.
    tr(style=top)
      td ngDoCheck
      td
        :marked
          Detect and act upon changes that Angular can or won't
          detect on its own. Called every change detection run.
  
          Permet de détecter et réagir aux changements qu'Angular ne peut détecter lui-même. 
          Appelé à chaque cycle de détection de changement.
  
    tr(style=top)
      td ngOnDestroy
      td
        :marked
          Cleanup just before Angular destroys the directive/component. 
          Unsubscribe observables and detach event handlers to avoid memory leaks.
  
          Permet de nettoyer juste avant qu'Angular détruise la directive ou le composant.
          Désabonnez-vous des observables et détachez les gestionnaires d'événements pour éviter les fuites de mémoire.
  :marked
    ### Components only
  
    ### Composants seulement
  
  table(width="100%")
    col(width="20%")
  