anchor.diff:  :marked
     ## Parent listens for child event
   
  -  The child component exposes an `EventEmitter` property with which it `emits` events when something happens. 
  +  The child component exposes an `EventEmitter` property with which it `emits` events when something happens.
     The parent binds to that event property and reacts to those events.
  -  
  -  The child's `EventEmitter` property is an ***output property***, 
  +
  +  The child's `EventEmitter` property is an ***output property***,
       typically adorned with an [@Output decoration](../guide/template-syntax.html#inputs-outputs)
       as seen in this `VoterComponent`:
  -  
  +
   +makeExample('cb-component-communication/ts/src/app/voter.component.ts')
   
   :marked
  -  Clicking a button triggers emission of a `true` or `false` (the boolean *payload*).
  -  
  -  The parent `VoteTakerComponent` binds an event handler (`onVoted`) that responds to the child event
  -  payload (`$event`) and updates a counter.
  -  
  +  Clicking a button triggers emission of a `true` or `false`, the boolean *payload*.
  +
  +  The parent `VoteTakerComponent` binds an event handler called `onVoted()` that responds to the child event
  +  payload `$event` and updates a counter.
  +
   +makeExample('cb-component-communication/ts/src/app/votetaker.component.ts')
   
   :marked
  -  The framework passes the event argument &mdash; represented by `$event` &mdash; to the handler method, 
  +  The framework passes the event argument&mdash;represented by `$event`&mdash;to the handler method,
     and the method processes it:
  -  
  +
   figure.image-display
     img(src="/resources/images/cookbooks/component-communication/child-to-parent.gif" alt="Child-to-parent")
  -  
  -:marked
  -  ### Test it
  -  
  +
  +:marked
  +  ### Test it
  +
     Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters:
  -  
  +
   +makeExample('cb-component-communication/e2e-spec.ts', 'child-to-parent')
   
   :marked
  
positive.code:   ## Intercept input property changes with a setter
  
    Use an input property setter to intercept and act upon a value from the parent.
    
    The setter of the `name` input property in the child `NameChildComponent` 
    trims the whitespace from a name and replaces an empty value with default text. 
    
  +makeExample('cb-component-communication/ts/src/app/name-child.component.ts')
  
  :marked
  
negative.code:   A parent component and its children share a service whose interface enables bi-directional communication
    *within the family*.
  
    The scope of the service instance is the parent component and its children.
    Components outside this component subtree have no access to the service or their communications.
  
    This `MissionService` connects the `MissionControlComponent` to multiple `AstronautComponent` children.
  
  +makeExample('cb-component-communication/ts/src/app/mission.service.ts')
  :marked
    The `MissionControlComponent` both provides the instance of the service that it shares with its children
    (through the `providers` metadata array) and injects that instance into itself through its constructor:
  
  +makeExample('cb-component-communication/ts/src/app/missioncontrol.component.ts')
  
  :marked
    The `AstronautComponent` also injects the service in its constructor.
    Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance:
  
  +makeExample('cb-component-communication/ts/src/app/astronaut.component.ts')
  
  .l-sub-section
    :marked
      Notice that this example captures the `subscription` and `unsubscribe()` when the `AstronautComponent` is destroyed.
      This is a memory-leak guard step. There is no actual risk in this app because the
      lifetime of a `AstronautComponent` is the same as the lifetime of the app itself.
      That *would not* always be true in a more complex application.
  
      You don't add this guard to the `MissionControlComponent` because, as the parent,
      it controls the lifetime of the `MissionService`.
  :marked
    The *History* log demonstrates that messages travel in both directions between
    the parent `MissionControlComponent` and the `AstronautComponent` children,
    facilitated by the service:
  
  figure.image-display
    img(src="/resources/images/cookbooks/component-communication/bidirectional-service.gif" alt="bidirectional-service")
  
  :marked
    ### Test it
  
    Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children
    and verify that the history meets expectations:
  
  +makeExample('cb-component-communication/e2e-spec.ts', 'bidirectional-service')
  
  :marked
  