anchor.diff:  <a id="parent-to-child"></a>
   :marked
     ## Pass data from parent to child with input binding
  -  
  -  `HeroChildComponent` has two ***input properties***, 
  +
  +  `HeroChildComponent` has two ***input properties***,
     typically adorned with [@Input decorations](../guide/template-syntax.html#inputs-outputs).
  -  
  +
   +makeExample('cb-component-communication/ts/src/app/hero-child.component.ts')
   :marked
     The second `@Input` aliases the child component property name `masterName` as `'master'`.
  -  
  -  The `HeroParentComponent` nests the child `HeroChildComponent` inside an `*ngFor` repeater, 
  -  binding its `master` string property to the child's `master` alias
  +
  +  The `HeroParentComponent` nests the child `HeroChildComponent` inside an `*ngFor` repeater,
  +  binding its `master` string property to the child's `master` alias,
     and each iteration's `hero` instance to the child's `hero` property.
   
   +makeExample('cb-component-communication/ts/src/app/hero-parent.component.ts')
   :marked
     The running application displays three heroes:
  -  
  +
   figure.image-display
     img(src="/resources/images/cookbooks/component-communication/parent-to-child.png" alt="Parent-to-child")
  -  
  -:marked
  -  ### Test it
  -  
  +
  +:marked
  +  ### Test it
  +
     E2E test that all children were instantiated and displayed as expected:
  -  
  +
   +makeExample('cb-component-communication/e2e-spec.ts', 'parent-to-child')
   
   :marked
  
positive.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 we capture 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.
      
      We do not 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
  
negative.code: .l-main-section#parent-to-child-local-var
  :marked
    ## Parent interacts with child via *local variable*
  
    A parent component cannot use data binding to read child properties
    or invoke child methods. You can do both
    by creating a template reference variable for the child element
    and then reference that variable *within the parent template*
    as seen in the following example.
  
    <a id="countdown-timer-example"></a>
    The following is a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket.
    It has `start` and `stop` methods that control the clock and it displays a
    countdown status message in its own template.
  +makeExample('cb-component-communication/ts/src/app/countdown-timer.component.ts')
  :marked
    The `CountdownLocalVarParentComponent` that hosts the timer component is as follows:
  
  +makeExample('cb-component-communication/ts/src/app/countdown-parent.component.ts', 'lv')
  :marked
    The parent component cannot data bind to the child's
    `start` and `stop` methods nor to its `seconds` property.
  
    You can place a local variable, `#timer`, on the tag `<countdown-timer>` representing the child component.
    That gives you a reference to the child component and the ability to access
    *any of its properties or methods* from within the parent template.
  
    This example wires parent buttons to the child's `start` and `stop` and
    uses interpolation to display the child's `seconds` property.
  
    Here we see the parent and child working together.
  
  figure.image-display
  