title: ControlValueAccessor (change) event is fired twice (Angular 4)
body: <p>I created a custom component (<code>my-custom-input</code>) with <code>ControlValueAccessor</code>. It works, but the change event is fired twice. The function in my component which fires the change events looks like this:</p>
  
  <pre><code>private myval: string;
  
  @Input() disabled: boolean = false;
  @Output() change = new EventEmitter&lt;string&gt;();
  
  fireChange() {
      console.log("Change emit");
      this.change.emit(this.myval);
      console.log("Change callback");
      this.onChangeCallback(this.myval);
      console.log("Touch emit");
      this.onTouchedCallback(this.myval);
  }
  </code></pre>
  
  <p>This is how I listen to changes in an other component, where I try to use <code>my-custom-input</code>:</p>
  
  <pre><code>&lt;my-custom-input [(ngModel)]="this.data" (change)="vChanged()"&gt;&lt;/my-custom-input&gt;
  </code></pre>
  
  <p>&nbsp;</p>
  
  <pre><code>vChanged() {
      console.log("change", this.data);
  }
  </code></pre>
  
  <p>This is what I read in the console:</p>
  
  <pre><code>Change emit
  change "oldvalue"
  Change callback
  Touch emit
  change "newvalue"
  </code></pre>
  
  <p>Why is the <code>change</code> callback called twice?</p>