1
00:00:00,670 --> 00:00:01,720
Hello again, everyone.

2
00:00:01,750 --> 00:00:06,220
So up until now, we've only talked about one way binding.

3
00:00:06,220 --> 00:00:09,790
So in this lesson, I want to talk about two way binding.

4
00:00:10,450 --> 00:00:15,190
I mean, I kind of told you what it was, but now we can put it into practice.

5
00:00:16,140 --> 00:00:19,680
So I want to give you a little example of an input.

6
00:00:20,880 --> 00:00:22,510
Now, here's what we're aiming for.

7
00:00:23,220 --> 00:00:29,760
There's going to be some information flowing to the component through the template, and then it will

8
00:00:29,760 --> 00:00:32,730
be binding from component to template.

9
00:00:33,810 --> 00:00:37,620
Thus, interaction from both sides will be.

10
00:00:38,590 --> 00:00:41,170
Transmitted and received or provided.

11
00:00:41,620 --> 00:00:42,010
OK.

12
00:00:43,160 --> 00:00:49,310
So now when we press enter in this input, I will provide the information flow to the component and

13
00:00:49,310 --> 00:00:53,990
I will create a string value as a name in the TSA file.

14
00:01:00,030 --> 00:01:02,970
Now use this value in the method.

15
00:01:04,330 --> 00:01:10,540
Now, to transfer data from this component, I'm going to do the name binding in the HTML file.

16
00:01:17,590 --> 00:01:21,430
And look, the first name we entered in the browser loaded up.

17
00:01:24,390 --> 00:01:30,330
So now we've done the operations that we actually know up until now, right, for example, all under

18
00:01:30,330 --> 00:01:35,880
a different value in this input press center, but we see the first value that we entered on the console

19
00:01:36,450 --> 00:01:41,310
because currently we're not providing a data flow to the component Vadum.

20
00:01:45,350 --> 00:01:48,590
We're only doing template data flow from the component.

21
00:01:49,590 --> 00:01:50,940
Right, so now.

22
00:01:51,870 --> 00:01:56,190
Let's see how we can provide Double-Sided information for those.

23
00:01:58,300 --> 00:02:07,270
When the event occurs in the HMO file, which will do here, it will be able to get the value with the

24
00:02:07,270 --> 00:02:08,260
target property.

25
00:02:12,650 --> 00:02:15,710
We can now provide data to component from the input.

26
00:02:16,900 --> 00:02:23,230
So when we tried again in the browser, now when we change the value in the input, we see that the

27
00:02:23,230 --> 00:02:25,390
console has also changed.

28
00:02:26,950 --> 00:02:30,190
So that provides that two way interaction.

29
00:02:32,790 --> 00:02:40,860
However, I'm sure you recall wait a minute, what did we learn, a method to make this process shorter?

30
00:02:41,850 --> 00:02:47,610
And I'd have to say, yes, good memory that was using the engie model.

31
00:02:48,960 --> 00:02:51,560
So why don't we go over it again and you can see how to do it?

32
00:02:53,460 --> 00:02:59,120
So I'm going to arrange this place and I'm just going to be using brackets within square brackets,

33
00:02:59,790 --> 00:03:01,470
I'm writing Engy Model.

34
00:03:02,370 --> 00:03:05,670
And I'll equate it to the variable name.

35
00:03:06,920 --> 00:03:10,670
And now we can see the combination of property binding and event binding.

36
00:03:11,590 --> 00:03:15,280
And we enabled a shorter two way binding process.

37
00:03:17,120 --> 00:03:24,470
Coocoo, so now we had to do one more process for a project in order for it to work the way that we

38
00:03:24,470 --> 00:03:25,070
want it to.

39
00:03:27,720 --> 00:03:35,850
And this will add to our form module project because engie module is included in the four module.

40
00:03:36,950 --> 00:03:43,370
If we don't add the form module to our project, we won't be able to use any module, right?

41
00:03:44,090 --> 00:03:50,060
So for this, I import the four module into the app module DOT's file.

42
00:03:51,280 --> 00:03:54,250
And of course, I also added into the import to Ray.

43
00:03:56,950 --> 00:04:04,240
All right, so now our projects are going to run correctly on the save all these changes and open the

44
00:04:04,240 --> 00:04:04,780
browser.

45
00:04:06,690 --> 00:04:14,220
So here we can see the first value here, I'll make some changes and enter, and as you can see now,

46
00:04:14,220 --> 00:04:15,330
we've got the new value.

47
00:04:18,330 --> 00:04:23,370
So that, my friends, is bilateral data, communication neco.

48
00:04:24,280 --> 00:04:30,100
So in our project, we saw that we can easily perform two way binding using the engie model.

49
00:04:31,030 --> 00:04:37,690
We also saw that the two way binding is actually a combination of property and event binding.

50
00:04:38,950 --> 00:04:44,200
All right, so in our next lesson, we're going to be talking about writing formatting data.

51
00:04:45,490 --> 00:04:47,790
All right, see you then, bye for now.