@input and @output decorator change event

Question

Going through some code of @input\@output decorator I found different behaviour.

In below code, there is counter component gets its value from parent app component via @input decorator and emit change via @output decorator.

My question :

1. Why change event is calling when I manually typing value in textbox.?, whereas I defined this.change.emit(this.count); only inside Increment\Decrement function. ?

2. When I make changes through Increment\Decrement button, I get the correct changed value in app component (parent), but when I manually type value, then I get [object Event] not typed number. Why So ?

Code is below Plunker is here.

counter component:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'counter',
  template: `
    <div class="counter">
      <button (click)="decrement()">
        Decrement
      </button>
        <input type="text" [(ngModel)]="count">
      <button (click)="increment()">
        Increment
      </button>
    </div>
  `
export class CounterComponent {  
  @Input()
  count: number = 0;

  @Output()
  change: EventEmitter<number> = new EventEmitter<number>();

  increment() {
    this.count++;
    this.change.emit(this.count);
  }

  decrement() {
    this.count--;
    this.change.emit(this.count);
  }  
}

app component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <counter
        [count]="myCount"
        (change)="countChange($event)">
      </counter>
    </div>
  `
})
export class AppComponent {
  myCount: number = 10;
  countChange(event) {
    console.log(event); //log Event object below
    console.log('change called...!!!');
    this.myCount = event; 
  }
}

I tried to change input type to number as well, also changed binding to 1 way : [ngModel]="count" but doesn't seem to be working.

console.log(event);

Event {isTrusted: true, type: "change", target: input.ng-untouched.ng-valid.ng-dirty, currentTarget: counter, eventPhase: 3…}

Answer 1

The main idea of angular when working with events is the ability to use any of standart DOM event in addition to build-in @Output event.

So when you write

(change)="handler($event)"

angular will call handler for both cases:

• when you have @Output() change and called change.emit()

• when standart change event has fired on input element

So replace your @Output event to something other than change and then it should work as you expect.

Fixed Plunker