angular-cn/public/docs/_examples/cb-component-communication/ts/app/app.component.html

<h1 id="top">Component Communication Cookbook</h1>

<a href="#parent-to-child">Pass data from parent to child with input binding ("Heroes")</a><br/>
<a href="#parent-to-child-setter">Intercept input property changes with a setter ("Master")</a><br/>
<a href="#parent-to-child-on-changes">Intercept input property changes with <i>ngOnChanges</i> ("Source code version")</a><br/>
<a href="#child-to-parent">Parent listens for child event ("Colonize Universe")</a><br/>
<a href="#parent-to-child-local-var">Parent to child via <i>local variable</i>("Countdown to Liftoff")</a><br/>
<a href="#parent-to-view-child">Parent calls <i>ViewChild</i>("Countdown  to Liftoff")</a><br/>
<a href="#bidirectional-service">Parent and children communicate via a service ("Mission Control")</a><br/>

<div id="parent-to-child">
  <hero-parent></hero-parent>
</div>
<a href="#top" class="to-top">Back to Top</a>

<hr>
<div id="parent-to-child-setter">
  <name-parent></name-parent>
</div>
<a href="#top" class="to-top">Back to Top</a>

<hr>
<div id="parent-to-child-on-changes">
  <version-parent></version-parent>
</div>
<a href="#top" class="to-top">Back to Top</a>

<hr>
<div id="child-to-parent">
  <vote-taker></vote-taker>
</div>
<a href="#top" class="to-top">Back to Top</a>
<hr>

<div id="parent-to-child-local-var">
  <countdown-parent-lv></countdown-parent-lv>
</div>
<a href="#top" class="to-top">Back to Top</a>
<hr>

<div id="parent-to-view-child">
  <countdown-parent-vc></countdown-parent-vc>
</div>
<a href="#top" class="to-top">Back to Top</a>
<hr>

<div id="bidirectional-service">
  <mission-control></mission-control>
</div>
<a href="#top" class="to-top">Back to Top</a>
<hr>