title: How is change detection performed with Outputs in Angular 2?
body: <p>Let's say I have a Parent and Child component with an Output binding:</p>
  
  <pre><code>&lt;parent&gt;
    &lt;child (doStuffChild)="doStuff()"&gt;&lt;/child&gt;
  &lt;/parent&gt;
  </code></pre>
  
  <p>A user click causes <code>doStuffChild.emit()</code>.</p>
  
  <ol>
  <li>What's the order of the events that follow: does <code>doStuff()</code> method in the parent get called first and then change detection happens from the root? </li>
  <li>Does the invocation of <code>doStuff()</code> in the parent also happen inside the <code>Zone.run()</code> started by the click? </li>
  <li>Does change detection eventually happen because the click eventually led to a <code>zone.onTurnDone()</code> event?</li>
  <li>What lifecycle hooks get called and in what order? (i.e. Do onChanges/doCheck get called in the parent or child?)</li>
  <li>If ngOnChanges gets called, why does that happen? I thought NgOnChanges only gets called for inputs. (After reading <a href="https://www.lucidchart.com/techblog/2017/01/18/angular-2-change-detection-seeing-it-in-action/#comment-93143" rel="nofollow noreferrer">this article</a> I'm assuming ngOnChanges gets called)</li>
  </ol>
  
  <p>I'm happy to clarify my question if it's too confusing.</p>