anchor.diff:  
   figure.image-display
     img(src="/resources/images/cookbooks/component-communication/setter.png" alt="Parent-to-child-setter")
  -  
  +
   :marked
     ### Test it
   
     E2E tests of input property setter with empty and non-empty names:
  -  
  +
   +makeExample('cb-component-communication/e2e-spec.ts', 'parent-to-child-setter')
   
   :marked
  
positive.code: a(id="countdown-tests")
  :marked
    ### Test it
    
    Test that the seconds displayed in the parent template
    match the seconds displayed in the child's status message.
    Test also that clicking the *Stop* button pauses the countdown timer:
    
  +makeExample('cb-component-communication/e2e-spec.ts', 'countdown-timer-tests')
  
  :marked
    [Back to top](#top)
    
  .l-main-section
  <a id="parent-to-view-child"></a>
  :marked
    ## Parent calls a *ViewChild*
    
    The *local variable* approach is simple and easy. But it is limited because 
    the parent-child wiring must be done entirely within the parent template.
    The parent component *itself* has no access to the child.
    
    We can't use the *local variable* technique if an instance of the parent component *class*
    must read or write child component values or must call child component methods.
    
    When the parent component *class* requires that kind of access, 
    we ***inject*** the child component into the parent as a *ViewChild*.
    
    We'll illustrate this technique with the same [Countdown Timer](#countdown-timer-example) example. 
    We won't change its appearance or behavior. 
    The child [CountdownTimerComponent](#countdown-timer-example) is the same as well.
  .l-sub-section
    :marked
      We are switching from the *local variable* to the *ViewChild* technique
      solely for the purpose of demonstration.
  :marked
    Here is the parent, `CountdownViewChildParentComponent`:
  +makeExample('cb-component-communication/ts/src/app/countdown-parent.component.ts', 'vc')
  :marked
    It takes a bit more work to get the child view into the parent component *class*.
     
    We import references to the `ViewChild` decorator and the `AfterViewInit` lifecycle hook.
    
    We inject the child `CountdownTimerComponent` into the private `timerComponent` property
    via the `@ViewChild` property decoration.
    
    The `#timer` local variable is gone from the component metadata. 
    Instead we bind the buttons to the parent component's own `start` and `stop` methods and
    present the ticking seconds in an interpolation around the parent component's `seconds` method.
    
    These methods access the injected timer component directly.
    
    The `ngAfterViewInit` lifecycle hook is an important wrinkle.
    The timer component isn't available until *after* Angular displays the parent view.
    So we display `0` seconds initially.
    
    Then Angular calls the `ngAfterViewInit` lifecycle hook at which time it is *too late*
    to update the parent view's display of the countdown seconds.
    Angular's unidirectional data flow rule prevents us from updating the parent view's
    in the same cycle. We have to *wait one turn* before we can display the seconds.
    
    We use `setTimeout` to wait one tick and then revise the `seconds` method so 
    that it takes future values from the timer component.
  
    ### Test it
    Use [the same countdown timer tests](#countdown-tests) as before.
  :marked
    [Back to top](#top)
    
  .l-main-section
  <a id="bidirectional-service"></a>
  :marked
  
negative.code: 
  <a id="toc"></a>
  :marked
    # 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>**.
  