anchor.diff:  
   <a id="toc"></a>
   :marked
  -  ## Table of contents
  -  
  -  [Pass data from parent to child with input binding](#parent-to-child)
  -
  -  [Intercept input property changes with a setter](#parent-to-child-setter)
  -
  -  [Intercept input property changes with *ngOnChanges*](#parent-to-child-on-changes)
  -
  -  [Parent listens for child event](#child-to-parent)
  -  
  -  [Parent interacts with child via a *local variable*](#parent-to-child-local-var)
  -  
  -  [Parent calls a *ViewChild*](#parent-to-view-child)
  -
  -  [Parent and children communicate via a service](#bidirectional-service)
  +  # Contents
  +
  +  - [Pass data from parent to child with input binding](#parent-to-child)
  +  - [Intercept input property changes with a setter](#parent-to-child-setter)
  +  - [Intercept input property changes with `ngOnChanges()`](#parent-to-child-on-changes)
  +  - [Parent calls an `@ViewChild()`](#parent-to-view-child)
  +  - [Parent and children communicate via a service](#bidirectional-service)
  +
   
   :marked
     **See the <live-example name="cb-component-communication"></live-example>**.
  
positive.code: <a id="parent-to-child"></a>
  :marked
    ## Pass data from parent to child with input binding
    
    `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
    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
    
    E2E test that all children were instantiated and displayed as expected:
    
  +makeExample('cb-component-communication/e2e-spec.ts', 'parent-to-child')
  
  :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
  