<p dir="auto">Hello,</p>
<p dir="auto">currently, I'm trying to integrate a custom third-party input field (source code editor) written in JavaScript which is not based on Angular. Thus I need to wrap it to a component, use <code class="notranslate">EventEmitter</code> to report changes outside and use <code class="notranslate">ngOnChanges</code> to apply changes coming from outside.</p>
<p dir="auto">The <code class="notranslate">Input</code> of the component is named <code class="notranslate">model</code> and the <code class="notranslate">Output</code> is named <code class="notranslate">modelChange</code> so that the other components <em>can</em> take advantage of a two-way data binding.</p>
<p dir="auto">I've noticed that if the parent component applies the two-way data binding and if the child emits an event, the change of the parent's data emits another event which is sent back to the child. If you imagine that the <code class="notranslate">ngOnChanges</code> calls an expensive method that handles the change, you probably agree with me that this effect is something I would like to avoid. Can you please provide a mechanism to achieve this?</p>
<p dir="auto">Or am I doing something wrong? Can it be done better?</p>
<p dir="auto">Here is a Plunk demonstrating the echo effect: <a href="http://plnkr.co/edit/drRlJRCsvnzcTqlR4UlX" rel="nofollow">http://plnkr.co/edit/drRlJRCsvnzcTqlR4UlX</a></p>
<p dir="auto">PS - I am not sure if this is related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="110318123" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/4593" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/4593/hovercard" href="https://github.com/angular/angular/issues/4593">#4593</a><br>
PS - Feel free to make the title more understandable.</p>
<p dir="auto">E.g.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export class Checkbox {
  @Output() change: EventEmitter = new EventEmitter(); 

  @HostListener('change', [
        '$event.target.value'
   ])
   onChange(event) { ... }
}"><pre class="notranslate"><code class="notranslate">export class Checkbox {
  @Output() change: EventEmitter = new EventEmitter(); 

  @HostListener('change', [
        '$event.target.value'
   ])
   onChange(event) { ... }
}
</code></pre></div>