anchor.diff:  :marked
     You can apply the spy to any native or component element and it'll be initialized and destroyed
     at the same time as that element.
  -  Here it is attached to the repeated hero `<div>`
  +  Here it is attached to the repeated hero `<div>`:
   +makeExample('lifecycle-hooks/ts/src/app/spy.component.html', 'template')(format=".")
   
   :marked
  
positive.code: block tick-methods
    :marked
      The `LoggerService.tick_then()` postpones the log update 
      for one turn of the browser's JavaScript cycle ... and that's just long enough.
  
  :marked
    Here's *AfterView* in action
  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.
  
  .l-main-section
  :marked
    ## AfterContent
    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.
  
negative.code:     1. Angular calls hook methods for *directives* as well as components.<br><br>
  
      2. A spy directive can provide insight into a DOM object that you cannot change directly.
      Obviously you can't touch the implementation of a native `<div>`.
      You can't modify a third party component either.
      But you can watch both with a directive.
  
  
  :marked
    The sneaky spy directive is simple, consisting almost entirely of `ngOnInit()` and `ngOnDestroy()` hooks
    that log messages to the parent via an injected `LoggerService`.
  
  +makeExample('lifecycle-hooks/ts/src/app/spy.directive.ts', 'spy-directive')(format=".")
  