Autoplay

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

    John LindquistJohn Lindquist

    Two-way binding still exists in Angular 2 and ngModel makes it simple. The syntax is a combination of the input and (output) syntax to represent that the data is being pushed out and pulled in.

    angularAngular
    5 - 6
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss