title: Angular 2 property binding: how do EventEmitters work?
body: <p>I've been working on learning Angular 2 two-way binding, and I've put together a demo that binds a component's property to another, contained component's property, as well as to several text fields. Unfortunately, a lot of it seems like <a href="http://www.outpost9.com/reference/jargon/jargon_46.html" rel="nofollow">magic</a> to me, which makes it awfully hard to debug when the magic isn't working. In particular, the demo reveals several places where I don't yet fully understand binding; this question is the first of what may be several on this topic.</p>
  
  <p>(The demo is at <a href="http://plnkr.co/edit/IUTy5p?p=preview" rel="nofollow">http://plnkr.co/edit/IUTy5p?p=preview</a>, in case you want to follow along at home...)</p>
  
  <p>The code implements a parent component with a <code>pName</code> string property, and a contained, child component with a <code>cName</code> property. The parent's property is two-way bound to the child's property using the banana box syntax:</p>
  
  <pre><code>&lt;child [(cName)]="pName"&gt;&lt;/child&gt;
  </code></pre>
  
  <p>Inside the child is a display of the <code>cName</code> property, as well as three text inputs, each of which is in some way bound to the <code>cName</code> property. The second text input is the important one here: </p>
  
  <pre><code>&lt;input type="text" [ngModel]="cName" (ngModelChange)="cNameChange.emit($event)"&gt;
  </code></pre>
  
  <p>The <code>ngModelChange</code> event invokes an <code>emit()</code> method on an <code>EventEmitter</code> whose name <code>cNameChange</code> is derived from the <code>cName</code> property's name:</p>
  
  <pre><code>@Output() public cNameChange:EventEmitter&lt;String&gt; = new EventEmitter&lt;String&gt;();
  </code></pre>
  
  <p>So, if you edit the second text input's value, the child's <code>cName</code> property changes, the other two text inputs change their values, and the parent's <code>pName</code> property changes.</p>
  
  <p>But, <strong>how</strong>?</p>
  
  <p>This can be split into two related questions:</p>
  
  <ol>
  <li>How does emitting that event change the <code>cName</code> property?</li>
  <li>How does changing the child's <code>cName</code> property end up changing the parent's <code>pName</code> property?</li>
  </ol>