Hello again, everyone.
So up until now, we've only talked about one way binding.
So in this lesson, I want to talk about two way binding.
I mean, I kind of told you what it was, but now we can put it into practice.
So I want to give you a little example of an input.
Now, here's what we're aiming for.
There's going to be some information flowing to the component through the template, and then it will
be binding from component to template.
Thus, interaction from both sides will be.
Transmitted and received or provided.
OK.
So now when we press enter in this input, I will provide the information flow to the component and
I will create a string value as a name in the TSA file.
Now use this value in the method.
Now, to transfer data from this component, I'm going to do the name binding in the HTML file.
And look, the first name we entered in the browser loaded up.
So now we've done the operations that we actually know up until now, right, for example, all under
a different value in this input press center, but we see the first value that we entered on the console
because currently we're not providing a data flow to the component Vadum.
We're only doing template data flow from the component.
Right, so now.
Let's see how we can provide Double-Sided information for those.
When the event occurs in the HMO file, which will do here, it will be able to get the value with the
target property.
We can now provide data to component from the input.
So when we tried again in the browser, now when we change the value in the input, we see that the
console has also changed.
So that provides that two way interaction.
However, I'm sure you recall wait a minute, what did we learn, a method to make this process shorter?
And I'd have to say, yes, good memory that was using the engie model.
So why don't we go over it again and you can see how to do it?
So I'm going to arrange this place and I'm just going to be using brackets within square brackets,
I'm writing Engy Model.
And I'll equate it to the variable name.
And now we can see the combination of property binding and event binding.
And we enabled a shorter two way binding process.
Coocoo, so now we had to do one more process for a project in order for it to work the way that we
want it to.
And this will add to our form module project because engie module is included in the four module.
If we don't add the form module to our project, we won't be able to use any module, right?
So for this, I import the four module into the app module DOT's file.
And of course, I also added into the import to Ray.
All right, so now our projects are going to run correctly on the save all these changes and open the
browser.
So here we can see the first value here, I'll make some changes and enter, and as you can see now,
we've got the new value.
So that, my friends, is bilateral data, communication neco.
So in our project, we saw that we can easily perform two way binding using the engie model.
We also saw that the two way binding is actually a combination of property and event binding.
All right, so in our next lesson, we're going to be talking about writing formatting data.
All right, see you then, bye for now.