Why is the change event fired on blur of a controlValueAccessor

Question

If I put a custom input implementing the ControlValueAccessor interface in my template and bind to its change event like this:

  <input-app [value]="'initialVal'" (change)="onChange($event)"></input-app>

With my custom input not firing any event on blur ( to be clear you have to focus on the input, change it, then blur, the event will then appear in the console).

<input
    type="text"
    [value]="value"/>

The onChange() method will be called and I don't understand why exactly that is the case.

Here is a plnkr

Answer 1

(change) should be triggered

when a change in the input value causes a new value to be committed to the model.

But I don't think you are using a model, in this case.

What you want is to do something each time you type in your input, so I would use (keyup) instead.

<input-app [value]="'hey'"  placeholder="your name" (keyup)="onChange($event)"></input-app>