title: Angular parent to child binding change detection
body: <p>In a nutshell, I have a component which works as a text input. The parent component passes data into this component using <code>@Input</code> bindings. When the change event gets fired via the <code>@Output</code> binding, I perform some automatic validation in the parent component. This is to remove erroneous values and replace them with some sensible default for a better user experience.</p>
  
  <p>Here is a basic version of the parent component</p>
  
  <pre><code>@Component({
      selector: 'parent',
      template: `
      &lt;div&gt;
          &lt;child [value]="item.key1"
                 (valueChange)="onValueChange($event)"&gt;
              &lt;/child&gt;
      &lt;/div&gt;
      `
  })
  export class Parent {
      item = {
          key1: 'test value',
          key2: 'another test value'
      };
  
      onValueChange(newValue) {
          // Perform some validation and set default
          if (newValue.length &gt; 4) {
              newValue = newValue.substring(0, 4);
          }
  
          this.item.key1 = newValue;
      }
  }
  </code></pre>
  
  <p>And the child component</p>
  
  <pre><code>@Component({
      selector: 'child',
      template: `
      &lt;div&gt;
          &lt;input type="text"
                 [(ngModel)]="value"
                 (blur)="onBlur($event)" /&gt;
      &lt;/div&gt;
      `
  })
  export class Child {
      @Input() value: string;
      @Output() valueChange = new EventEmitter();
  
      onBlur() {
          this.valueChange.emit(this.value);
      }
  }
  </code></pre>
  
  <p>See <a href="https://embed.plnkr.co/BjpnXbj3suvtrI6Q/" rel="nofollow noreferrer">here for a Plunker example</a></p>
  
  <p>The issue I am having is as follows:</p>
  
  <p>When entering a value in the child input and firing the <code>blur</code> event, the new value is bubbled up to the parent and the validation is applied - if the validation causes the value to get modified, it bubbles back down to the child's value correctly - happy days.</p>
  
  <p>However, if the first 4 characters stay the same, and you append additional characters, upon <code>blur</code> the validation will still be applied and the parent's value will get updated correctly, but the child will preserve the "invalid" value - no more happy days.</p>
  
  <p>So it looks to me like Angular isn't detecting the change in the parents data (fair enough because it hasn't technically changed) so it isn't sending the "latest" value back down to the child.</p>
  
  <p>My question is, how can I get the child text input to always show the correct value from the parent, even if it technically hasn't "changed"?</p>