title: Angular4: Prevent rerendering component on input change
body: <p>I've been struggling with some stuff in Angular4. Please consider this Plunker: <a href="https://embed.plnkr.co/Sh4LaBtXOfxTzeL996jb/" rel="noreferrer">https://embed.plnkr.co/Sh4LaBtXOfxTzeL996jb/</a></p>
  
  <p>It's a simple app which has a list of 3 items. It displays those 3 items in a subcomponent that lets the user edit the item. </p>
  
  <p>I want to update the state on every keystroke (keyup). As I emit the new value, the data in the parent component (App) is updated, which causes a rerender of all the item subcomponents, which in turn causes the input field stop being focussed (as it is replaced). </p>
  
  <p>That means the user can only type a single character before needing to refocus the input.</p>
  
  <p>Is there any way to prevent the rerender / keep the focus on the input or a better way to set it up alltogether?</p>
  
  <p>As a temporary fix for this I'm now registering what field has been changed in localStorage and on ngAfterViewInit I'm resetting the focus... which works but is ugly. I feel there should be a better way?</p>
  
  <p>(In the Plunker I've setup a very simple update but in my real app I'm using firebase, subscribing to the list info which gives me the list as a whole when it emits. When that happens I set <code>this.list</code> to the data that's emitted, which causes the rerender.)</p>
  
  <p>Thanks!</p>