title: Reset input fields of child component on parent's form submit
body: <blockquote>
    <p>This is not a debugging problem, we're looking for the conceptual guidance on the best possible solution for the problem</p>
  </blockquote>
  
  <p>In our <a href="https://embed.plnkr.co/dZvIOdxEb05mKtEPhbgT/" rel="nofollow noreferrer">Angular 2 app</a>, we've a </p>
  
  <ul>
  <li><code>&lt;parent-component&gt;</code> which has a <code>&lt;form&gt;</code></li>
  <li>The <code>&lt;form&gt;</code> has <code>&lt;level-1-child&gt;</code></li>
  <li>The <code>&lt;level-1-child&gt;</code> has <code>&lt;level-2-child&gt;</code></li>
  <li>The <code>&lt;level-2-child&gt;</code> has <code>&lt;textarea&gt;</code></li>
  </ul>
  
  <p><strong>What we need to do?</strong></p>
  
  <ul>
  <li>Reset the <code>&lt;form&gt;</code> elements of <code>&lt;parent-component&gt;</code>, <code>&lt;level-1-child&gt;</code> &amp; <code>&lt;level-2-child&gt;</code> on <code>&lt;button&gt;</code> click or submit of <code>&lt;parent-component&gt;</code>'s <code>&lt;form&gt;</code></li>
  </ul>
  
  <p>Here is the <a href="https://embed.plnkr.co/dZvIOdxEb05mKtEPhbgT/" rel="nofollow noreferrer">issue re-producible</a></p>