Two Way Binding Suggestion

[sinelanguage]

I think we should make this page a bit more verbose and show something like this: https://angular-2-training-book.rangle.io/handout/components/app_structure/two_way_data_binding.html

First using ngModel:

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

Then using class variables:

<input [value]="username" (input)="username = $event.target.value">
<p>Hello {{username}}!</p>

Then break it down and explain it like this:

[value]=”username” - Binds the expression username to the input element’s value property (input)=”expression” - Is a declarative way of binding an expression to the input element’s input event (yes there’s such event) username = $event.target.value - The expression that gets executed when the input event is fired $event - Is an expression exposed in event bindings by Angular, which has the value of the event’s payload

The main goal being that its specifically calling out that you get an instance of the Angular $event object's payload value automagically (if thats the right way to say it).