Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

[00:00] Now that we have the message through in Input, we can actually use ngModel on our Input element. That will look like this, [(ngModel)] with the square brackets, the parens, and then ngModel. This is combining two things we've talked about already where the parens represent an Event, and the square brackets represents pushing values in on Inputs.

[00:24] You can think of the square brackets and parens in a combination as two-way binding, where if we give it this message, when the message changes from outside of this Input it will push new value in. When the value changes from inside the Input, it will pass the new value out to this message. You can think of the parens as out, and the square brackets as in.

[00:48] You'll see that once I hit save, that if I change the value of this, I'll delete this and a couple of words, you'll see that the value above it changes as well. So this message and this message are staying in sync, because the value of this Input element is changing.

[01:06] From the other angle if were to in my constructor do a setInterval, and say every...We'll say this message is Math.random().toString() every one second, and now I hit save. You'll see that every second these values are changing and being pushed in, but if I type things inside the Input it's pushing them out.

[01:33] Changing this message from outside of the Input updates it, changing the message from inside of the Input updates it out. That's what these represent around the ngModel.