Hello, everyone.
Up until now, we've talked about one way communication and basically we've got it all figured out.
Now it's time to talk to Wei.
Before we start on the topic, though, we will need to add the forms module to the app module.
Because we're going to be using forms in this lesson and we should include this module in the project.
So for this, I will open up that module that.
Yes, and here I'll add the forms module into the import directory.
And of course, we'll need to import this above.
And we'll specify that we import this module from angular forms.
All right, so now we have included the forms module in the project.
So now we can look a little deeper and check out the two way binding method.
It's now open up this e-mail file.
And I want to make it a little bit easier, this input section here that we prepared last time, so
we'll tidied up here a little bit and we're going to use two way binding method for this input.
Now to a binding can call it.
Well, you know, I think that's a pretty good way to look at it.
It's a combination of property binding and event binding.
All right.
So I'll put square brackets first, then parentheses.
And here I will write and model.
Now we'll need to import the forms module in the app module to use energy module.
So you see why we made this admission at the beginning of the less.
So we're going to talk more about Engy model while explaining the directives.
So now we can set this energy model, we can give it a property that we defined in the typescript file.
So the input will be triggered and the result of it, this property will be updated.
So it's tested on the browser.
And here are the two input.
And the last lesson, this is the input field that we used with event binding, and this is where we're
going to start a new initialism.
So as you can see, when I started filling in the first input field, this place starts to fill in as
well.
When I fill in this second field, it's not affected.
Because it's only one way binding, so it only affects it when I change the template.
However, there is this thing called two way binding.
But it's not exactly a two way linking.
So let's have a look at dialogue from the typescript to HTML file, so I'll just delete this and we
can look at it a little bit better.
So I'll write in a value of this property in the typescript file.
And when I look at the changes this field, this first field here, it's empty.
But a second field has the value that we wrote because there was no trigger on the template.
But we did make changes to the typescript file and here is the second input where we use the two way
binding method that is affected by this situation.
So in other words, with two way binding, we can make changes via the template as well as from our
typescript file.
You follow.
Cool, because that's a great way to learn about two way communication.
So basically, we've talked about our data mining methods and angular.
You're going to put them to work a lot, I know.
Now, I want to just tidy up a few small changes before we finish up here, so we're going to edit the
sections that we prepared.
Now, I'll comment the string interpellation to use here.
And we'll print this value after pressing the button.
Then I'll write it in typescript file with this method.
And since we're using the two way binding method, this feature will now be updated to be two way.
So now when you look at the browser right in this field and I can see this value when I press the button.
So now when I press the button again without typing anything, we see the first value in the typescript
file.
It it just looks so much better that way, too, right?
So, yeah, that's it, that's all you need to know about data binding?
Well, at least it's enough for now.
We're going to do some more details next time we'll talk about directive's in the next lesson.
All right.
I'll see you then.
Bye for now.