anchor.diff:          Directives have lifecycle hooks too.
           We create a `SpyDirective` that logs when the element it spies upon is 
           created or destroyed using the `ngOnInit` and `ngOnDestroy` hooks.
  -        
  +
  +        Les directives ont aussi leurs hooks de cycle de vie. 
  +        Nous créons une `SpyDirective` qui logue lorsque l'élément qu'il espionne
  +        est créé ou détruit en utilisant les hooks `ngOnInit` et `ngOnDestroy`.
  +
           We apply the `SpyDirective` to a `<div>` in an `ngFor` *hero* repeater
           managed by the parent `SpyComponent`.
  +
  +        Nous appliquons la `SpyDirective` à un `<div>` dans un modèle de répétition `ngFor` de *hero* 
  +        géré par le parent `SpyComponent`.
  +
     tr(style=top)
       td <a href="#onchanges">OnChanges</a>
       td
  
positive.code:     td
        :marked
          before `ngOnInit` and when a data-bound input property value changes.
    tr(style=top)
      td ngOnInit
      td
        :marked
          after the first `ngOnChanges`.
    tr(style=top)
      td ngDoCheck
      td
        :marked
          during every Angular change detection cycle.
    tr(style=top)
      td ngAfterContentInit
      td
        :marked
          after projecting content into the component.
    tr(style=top)
      td ngAfterContentChecked
      td
        :marked
           after every check of projected component content.
    tr(style=top)
      td ngAfterViewInit
      td
        :marked
          after initializing the component's views and child views.
    tr(style=top)
      td ngAfterViewChecked
      td
        :marked
           after every check of the component's views and child views.
    tr(style=top)
      td ngOnDestroy
      td
        :marked
           just before Angular destroys the directive/component.
  
  a(id="other-lifecycles")
  .l-main-section
  :marked
    ## Other lifecycle hooks
    
    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.
    
    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.
    
    3rd party libraries might implement their hooks as well in order to give us, the developers, more
    control over how these libraries are used.
  
  .l-main-section#the-sample
  :marked
    ## Lifecycle exercises
  
    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`.
  
    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.
    
    Here's a brief description of each exercise: 
  
  table(width="100%")
    col(width="20%")
  
negative.code:         See how Angular calls the `ngOnChanges` hook with a `changes` object
          every time one of the component input properties changes.
          Shows how to interpret the `changes` object.
  
          Nous voyons comment Angular appelle le hook `ngOnChanges` avec l'objet `changes` 
          chaque fois qu'une des propriétés d'entrée du composant change. 
          Montre comment interpréter l'objet `changes`.
  
    tr(style=top)
      td <a href="#docheck">DoCheck</a> 
      td
        :marked
          Implements an `ngDoCheck` method with custom change detection.
          See how often Angular calls this hook and watch it post changes to a log.
  
          Implémente une méthode `ngDoCheck` avec une détection de changement sur mesure.
          Nous voyons à quel rythme Angular appelle ce hook et l'examinons poster les changements dans un log.
    tr(style=top)
      td <a href="#afterview">AfterView</a>
      td
        :marked
          Shows what Angular means by a *view*.
          Demonstrates the `ngAfterViewInit` and `ngAfterViewChecked` hooks.
  
          Montre ce qu'Angular appelle une *vue*.
          Décrit les hooks `ngAfterViewInit` et `ngAfterViewChecked`.
    tr(style=top)
      td <a href="#aftercontent">AfterContent</a>
      td
  