I'm currently reading about two way data binding in Angular 2 and reading this article.
https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html
In this article, there is a child component with an @Input and @Output which allows a value inside the component to be bonded to a variable on its parent.
export class CustomCounterComponent {
counterValue = 0;
@Output() counterChange = new EventEmitter();
@Input()
get counter() {
return this.counterValue;
}
set counter(val) {
this.counterValue = val;
this.counterChange.emit(this.counterValue);
}
decrement() {
this.counter--;
}
increment() {
this.counter++;
}
}
parent HTML
<custom-counter [(counter)]="counterValue"></custom-counter>
<p><code>counterValue = {{counterValue}}</code></p>
So for me, I understand why the @Input is needed - however I don't understand how the @Output counterChange works because it's not even being subscribed by anything on the parent. However, it is necessary to have it there and also have it called counterChange in order to work.
The author of the article says
The next thing we need to do, is to introduce an @Output() event with the same name, plus the Change suffix. We want to emit that event, whenever the value of the counter property changes. Let’s add an @Output() property and emit the latest value in the setter interceptor:
Why do we need to have the same name plus change suffix? Is this some sort of Angular convention that I'm unaware of? I'm just trying to figure out which fundamental concept I've missed so I can understand how this is working.
I have a plunker of the code here if it'll help.
