anchor.diff:    The *AfterContent* sample explores the `AfterContentInit` and `AfterContentChecked` hooks that Angular calls
     *after* Angular projects external content into the component.
     
  +  L'exemple *AfterContent* explore les hooks `AfterContentInit` et `AfterContentChecked` appelés par Angular 
  +  *après* qu'il ait projeté du contenu externe dans le composant.
  +
     ### Content projection
  +
  +  ### Projection de contenu
  +
     *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.
  - 
  +
  +  La *projection de contenu* est un moyen d'importer du contenu HTML depuis l'extérieur du composant et d'insérer ce contenu
  +  dans le modèle du composant à un endroit désigné.
  +
   .l-sub-section
     :marked
       Angular 1 developers know this technique as *transclusion*.
  +
  +    Les développeurs Angular 1 connaissent cette technique sous le nom de *transclusion*.
     
   :marked
     We'll illustrate with a variation on the [previous](#afterview) example 
     whose behavior and output is almost the same.
  -  
  +
  +  Nous allons l'illustrer avec une variation de l'exemple [précédent](#afterview)
  +  dont le comportement et la sortie sont pratiquement identiques. 
  +
     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.
  +
  +  Cette fois, plutôt que d'inclure la vue fils à partir du modèle, nous allons l'importer 
  +  depuis le parent de `AfterContentComponent`. Voici le modèle du parent.
  +
   +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*.
  -  
  +
  +  Notez que le tag `<my-child>` est placé entre les tags `<after-content>`.
  +  Nous ne plaçons jamais de contenu entre les tags d'un composant *sauf lorsque nous voulons projeter
  +  ce contenu dans le composant*.
  +
     Now look at the component's template:
  +
  +  Voyez maintenant le modèle du composant&nbsp;:
  +
   +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.
  +
  +  Le tag `<ng-content>` est un *espace réservé* pour le contenu externe.
  +  Il indique à Angular où insérer ce contenu.
  +  Dans ce cas, le contenu projeté est le `<my-child>` provenant du parent.
  +
   figure.image-display
     img(src='/resources/images/devguide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content")
   :marked
  
positive.code:       :marked
          Demonstrates every lifecycle hook.
          Each hook method writes to the on-screen log.
    tr(style=top)
      td <a href="#spy">Spy</a>
      td
  
negative.code:     td
        :marked
          before `ngOnInit` and when a data-bound input property value changes.
  
          avant `ngOnInit` et au changment de valeur d'une propriété d'entrée liée.
    tr(style=top)
      td ngOnInit
      td
        :marked
          after the first `ngOnChanges`.
  
          après le premier `ngOnChanges`.
    tr(style=top)
      td ngDoCheck
      td
        :marked
          during every Angular change detection cycle.
  
          durant chaque cycle de détection de changement d'Angular.
    tr(style=top)
      td ngAfterContentInit
      td
        :marked
          after projecting content into the component.
  
          après la projection de contenu dans le composant.
    tr(style=top)
      td ngAfterContentChecked
      td
        :marked
           after every check of projected component content.
  
           après chaque vérification de contenu projeté dans le composant.
    tr(style=top)
      td ngAfterViewInit
      td
        :marked
          after initializing the component's views and child views.
  
          après avoir initialisé les vues du composant et ses vues fils.
    tr(style=top)
      td ngAfterViewChecked
      td
        :marked
           after every check of the component's views and child views.
  
           après la vérification des vues du composant et de ses vues fils.
    tr(style=top)
      td ngOnDestroy
      td
        :marked
           just before Angular destroys the directive/component.
  
           juste avant qu'Angular détruise la directive ou le composant.
  
  a(id="other-lifecycles")
  .l-main-section
  :marked
    ## Other lifecycle hooks
    
    ## Autres hooks de cycle de vie
  
    Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed. 
    The router, for instance, also has it's own [router lifecycle hooks](router.html#router-lifecycle-hooks)
    that allow us to tap into specific moments in route navigation.
  
    D'autres sous-systèmes d'Angular peuvent avoir leurs propres hooks de cycle de vie en plus des hooks du composant 
    que nous avons listés.
    Le routeur, par exemple, a aussi ses propres [hooks de cycle de vie du routeur](router.html#router-lifecycle-hooks)
    qui nous permettent d'intervenir à différents moments lors de la navigation.
  
    A parallel can be drawn between `ngOnInit` and `routerOnActivate`. 
    Both are prefixed so as to avoid collision, and both run right when a component is 'booting' up.
  
    Un parallèle peut être tracé entre `ngOnInit` et `routerOnActivate`.
    Tous deux sont préfixés pour éviter des collisions et tous deux sont exécutés lorsque le composant 'démarre'.
  
    3rd party libraries might implement their hooks as well in order to give us, the developers, more
    control over how these libraries are used.
  
    Des bibliothèques tierces peuvent aussi implémenter leurs hooks afin de fournir, à nous développeurs, 
    plus de contrôle sur la façon dont sont utilisées ces bibliothèques.
  
  .l-main-section#the-sample
  :marked
    ## Lifecycle exercises
  
    ## Exercices sur le cycle de vie
  
    The <live-example></live-example>
    demonstrates the lifecycle hooks in action through a series of exercises
    presented as components under the control of the root `AppComponent`.
  
    Le <live-example></live-example>
    décrit les hooks de cycle de vie en action à travers une série d'exercices 
    présentés comme des composants sous le contrôle de la racine `AppComponent`.
  
    They follow a common pattern:  a *parent* component serves as a test rig for 
    a *child* component that illustrates one or more of the lifecycle hook methods.
  
    Ils suivent un modèle commun&nbsp;: un composant *parent* sert de banc d'essai pour
    un composant *fils* illustrant une ou plusieurs méthodes de cycle de vie.
  
    Here's a brief description of each exercise: 
  
    Voici une brève description de chaque exercice&nbsp;:
  
  table(width="100%")
    col(width="20%")
  