anchor.diff:      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%")
  
positive.code:     th Hook
      th Purpose
    tr(style=top)
      td ngOnInit
      td
        :marked
          Initialize the directive/component after Angular initializes the data-bound input properties.
    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.
    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.
    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.
  
  :marked
    ### Components only
  
  table(width="100%")
    col(width="20%")
    col(width="80%") 
    tr
      th Hook
      th Purpose
    tr(style=top)
      td ngAfterContentInit
      td
        :marked
          After Angular projects external content into its view.
    tr(style=top)
      td ngAfterContentChecked
      td
        :marked
          After Angular checks the bindings of the external content that it projected into its view.
    tr(style=top)
      td ngAfterViewInit
      td
        :marked
          After Angular creates the component's view(s).
    tr(style=top)
      td ngAfterViewChecked
      td
        :marked
          After Angular checks the bindings of the component's view(s).
  :marked
    Angular does not call the hook methods in this order.
  
  a(id="hook-sequence")
  .l-main-section
  :marked
    ## Lifecycle sequence
    *After* Angular creates a component/directive by `new`-ing its constructor, 
    it calls the lifecycle hook methods in the following sequence at specific moments:  
  table(width="100%")
    col(width="20%")
    col(width="80%") 
  
negative.code:   We see log entries as the string value of the *power* property changes. But the `ngOnChanges` did not catch changes to `hero.name`
    That's surprising at first. 
    
    Nous voyons des entrées de log au fur et à mesure que la valeur chaîne de la propriété *power* change. 
    Mais `ngOnChanges` n'a pas vu les changements de `hero.name`. 
    C'est surprenant au premier abord.
  
    Angular only calls the hook when the value of the input property changes. 
    The value of the `hero` property is the *reference to the hero object*.
    Angular doesn't care that the hero's own `name` property changed. 
    The hero object *reference* didn't change so, from Angular's perspective, there is no change to report!
  
    Angular appelle uniquement le hook lorsque la valeur de la propriété d'entrée change.
    La valeur de la propriété `hero` est la *référence vers l'objet hero*.
    Angular ne se soucie pas du fait que la propriété `name` de hero change.
    La *référence* à l'objet hero n'a pas changé et donc, du point de vue d'Angular, il n'y a pas de changement à signaler&nbsp;!
  
  .l-main-section
  :marked
    ## DoCheck
    We can use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
  
    Nous pouvons utiliser le hook `DoCheck` pour détecter et réagir aux changements qu'Angular ne capture
    pas lui-même.
  
  .l-sub-section
    :marked
      With this method we can detect a change that Angular overlooked. 
      What we do with that information to refresh the display is a separate matter.
  
      Avec cette méthode nous pouvons détecter un changement qu'Angular ignore.
      Ce que nous faisons avec cette information pour rafraîchir l'affichage est un autre sujet.
  
  :marked
    The *DoCheck* sample extends the *OnChanges* sample with this implementation of `DoCheck`:
  
    L'exemple *DoCheck* complète l'exemple *OnChanges* avec l'implémentation de `DoCheck`&nbsp;:
    
  +makeExample('lifecycle-hooks/ts/app/do-check.component.ts', 'ng-do-check', 'DoCheckComponent (ngDoCheck)')(format=".")
  :marked
    We manually check everything that we care about, capturing and comparing against previous values.
    We write a special message to the log when there are no substantive changes 
    to the hero or the power so we can keep an eye on the method's performance characteristics.
  
    Nous vérifions manuellement tout ce qui nous intéresse, capturant et comparant avec les valeurs précédentes.
    Nous écrivons un message spécifique dans le log lorsqu'il n'y a pas de changement substantiel 
    à hero ou power afin de pouvoir garder un oeil sur les caractéristiques des performances de la méthode.
  
    The results are illuminating:
  
    Les résultats sont édifiants&nbsp;:
  
  figure.image-display
    img(src='/resources/images/devguide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck")
  :marked
    We now are able to detect when the hero's `name` has changed. But we must be careful.
    
    Nous sommes maintenant capables de détecter lorsque la propriété `name` du hero a changé. 
    Mais nous devons faire attention. 
  
    The `ngDoCheck` hook is called with enormous frequency &mdash; 
    after _every_ change detection cycle no matter where the change occurred.
    It's called over twenty times in this example before the user can do anything. 
    
    Le hook `ngDoCheck` est appelé à une fréquence très élevée &mdash; 
    après _chaque_ cycle de détection de changement peu importe où le changement a eu lieu.
    Il est appelé plus de vingt fois dans cet exemple avant que l'utilisateur puisse faire quoi que ce soit.
  
    Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
    Mere mousing into another input box triggers a call.
    Relatively few calls reveal actual changes to pertinent data.
    Clearly our implementation must be very lightweight or the user experience may suffer.
  
    La plupart de ces vérifications initiales sont déclenchées par le premier rendu par Angular de 
    *données sans relation ailleurs dans la page*.
    Le simple fait de passer la souris au dessus d'une autre boîte de saisie déclenche un appel.
    Relativement peu d'appels révèlent des changements sur des données pertinentes.
    Il est clair que notre implémentation doit être très légère ou l'expérience utilisateur en souffrirait. 
  
  .l-sub-section
    :marked
      We also see that the `ngOnChanges` method is called in contradiction of the 
      [incorrect API documentation](../api/core/index/DoCheck-class.html).
  
      Nous voyons aussi que la méthode `ngOnChanges` est appelée malgré ce qui est dit dans la 
      [documentation de l'API incorrecte](../api/core/index/DoCheck-class.html).
  .l-main-section
  :marked
    ## AfterView
    The *AfterView* sample explores the `AfterViewInit` and `AfterViewChecked` hooks that Angular calls
    *after* it creates a component's child views.
    
    L'exemple *AfterView* explore les hooks `AfterViewInit` et `AfterViewChecked` appelés par Angular 
    *après* avoir créé les vues fils d'un composant.
  
    Here's a child view that displays a hero's name in an input box:
  
    Voici une vue fils qui affiche le nom d'un hero dans une boîte de saisie&nbsp;:
  
  +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'child-view', 'ChildComponent')(format=".")
  :marked
    The `AfterViewComponent` displays this child view *within its template*:
    
    `AfterViewComponent` affiche cette vue fils *dans son modèle*&nbsp;:
  
  +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'template', 'AfterViewComponent (template)')(format=".")
  :marked
    The following hooks take action based on changing values *within the child view* 
    which we can only reach by querying for the child view via the property decorated with 
    [@ViewChild](../api/core/index/ViewChild-var.html).
  
    Les hooks suivants sont activés selon les changements de valeurs *dans la vue fils*
    que nous pouvons uniquement atteindre à travers la propriété décorée par
    [@ViewChild](../api/core/index/ViewChild-var.html).
  
  +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".")
  .a(id="wait-a-tick")
  :marked
    ### Abide by the unidirectional data flow rule
  
    ### Respecter la règle de flux de données unidirectionnel
  
    The `doSomething` method updates the screen when the hero name exceeds 10 characters.
  
    La méthode `doSomething` met à jour l'écran lorsque le nom du hero excède 10 caractères.
  
  +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'do-something', 'AfterViewComponent (doSomething)')(format=".")
  :marked
    Why does the `doSomething` method wait a tick before updating `comment`?
  
    Pourquoi la méthode `doSomething` attend-elle un tick avant de mettre à jour `comment`&nbsp;?
  
    Because we must adhere to Angular's unidirectional data flow rule which says that
    we may not update the view *after* it has been composed.
    Both hooks fire after the component's view has been composed.
  
    Car nous devons adhérer à la règle Angular de flux de données unidirectionnel qui dit que 
    nous ne devons pas mettre à jour la vue *après* qu'elle ait été composée.
    Les deux hooks sont déclenchés après la composition de la vue du composant. 
  
    Angular throws an error if we update component's data-bound `comment` property immediately (try it!).
  
    Angular lève une erreur si nous mettons à jour immédiatement la propriété `comment` liée du composant (essayez&nbsp;!)
  
  block tick-methods
    :marked
      The `LoggerService.tick` methods, which are implemented by a call to `setTimeout`, postpone the update one turn of the of the browser's JavaScript cycle ... and that's long enough.
  
      Les méthodes `LoggerService.tick`, qui sont implémentées par un appel à `setTimeout`, 
      reportent la mise à jour d'un tour de cycle JavaScript du navigateur ... ce qui est suffisamment long. 
  :marked
    Here's *AfterView* in action
  
    Voici *AfterView* en action&nbsp;:
  figure.image-display
    img(src='/resources/images/devguide/lifecycle-hooks/after-view-anim.gif' alt="AfterView")
  :marked
    Notice that Angular frequently calls `AfterViewChecked`, often when there are no changes of interest.
    Write lean hook methods to avoid performance problems.
  
    Notez qu'Angular appelle régulièrement `AfterViewChecked`, même lorsqu'il n'y a pas de changement intéressant.
    Écrivez des méthodes hook légères pour éviter des problèmes de performance.
  
  .l-main-section
  :marked
  