1
00:00:00,720 --> 00:00:02,070
Hello, everyone.

2
00:00:02,520 --> 00:00:10,280
Up until now, we've talked about one way communication and basically we've got it all figured out.

3
00:00:10,860 --> 00:00:13,980
Now it's time to talk to Wei.

4
00:00:16,480 --> 00:00:23,080
Before we start on the topic, though, we will need to add the forms module to the app module.

5
00:00:24,180 --> 00:00:29,220
Because we're going to be using forms in this lesson and we should include this module in the project.

6
00:00:30,030 --> 00:00:33,480
So for this, I will open up that module that.

7
00:00:33,630 --> 00:00:40,020
Yes, and here I'll add the forms module into the import directory.

8
00:00:45,940 --> 00:00:48,430
And of course, we'll need to import this above.

9
00:00:50,090 --> 00:00:54,530
And we'll specify that we import this module from angular forms.

10
00:00:55,520 --> 00:01:00,140
All right, so now we have included the forms module in the project.

11
00:01:01,880 --> 00:01:07,850
So now we can look a little deeper and check out the two way binding method.

12
00:01:09,270 --> 00:01:11,310
It's now open up this e-mail file.

13
00:01:12,240 --> 00:01:20,010
And I want to make it a little bit easier, this input section here that we prepared last time, so

14
00:01:20,010 --> 00:01:26,970
we'll tidied up here a little bit and we're going to use two way binding method for this input.

15
00:01:28,410 --> 00:01:32,190
Now to a binding can call it.

16
00:01:32,790 --> 00:01:35,590
Well, you know, I think that's a pretty good way to look at it.

17
00:01:36,030 --> 00:01:39,600
It's a combination of property binding and event binding.

18
00:01:39,930 --> 00:01:40,320
All right.

19
00:01:41,040 --> 00:01:45,030
So I'll put square brackets first, then parentheses.

20
00:01:45,810 --> 00:01:48,420
And here I will write and model.

21
00:01:50,040 --> 00:01:57,070
Now we'll need to import the forms module in the app module to use energy module.

22
00:01:58,030 --> 00:02:00,640
So you see why we made this admission at the beginning of the less.

23
00:02:01,930 --> 00:02:05,710
So we're going to talk more about Engy model while explaining the directives.

24
00:02:07,460 --> 00:02:14,780
So now we can set this energy model, we can give it a property that we defined in the typescript file.

25
00:02:15,880 --> 00:02:21,160
So the input will be triggered and the result of it, this property will be updated.

26
00:02:22,470 --> 00:02:24,090
So it's tested on the browser.

27
00:02:25,210 --> 00:02:26,590
And here are the two input.

28
00:02:27,540 --> 00:02:34,110
And the last lesson, this is the input field that we used with event binding, and this is where we're

29
00:02:34,110 --> 00:02:37,170
going to start a new initialism.

30
00:02:38,310 --> 00:02:44,070
So as you can see, when I started filling in the first input field, this place starts to fill in as

31
00:02:44,070 --> 00:02:44,390
well.

32
00:02:46,820 --> 00:02:50,300
When I fill in this second field, it's not affected.

33
00:02:51,350 --> 00:02:56,870
Because it's only one way binding, so it only affects it when I change the template.

34
00:02:58,140 --> 00:03:02,100
However, there is this thing called two way binding.

35
00:03:03,920 --> 00:03:07,430
But it's not exactly a two way linking.

36
00:03:09,180 --> 00:03:18,300
So let's have a look at dialogue from the typescript to HTML file, so I'll just delete this and we

37
00:03:18,300 --> 00:03:19,970
can look at it a little bit better.

38
00:03:20,880 --> 00:03:25,290
So I'll write in a value of this property in the typescript file.

39
00:03:26,200 --> 00:03:30,670
And when I look at the changes this field, this first field here, it's empty.

40
00:03:32,010 --> 00:03:38,190
But a second field has the value that we wrote because there was no trigger on the template.

41
00:03:40,210 --> 00:03:47,020
But we did make changes to the typescript file and here is the second input where we use the two way

42
00:03:47,020 --> 00:03:50,650
binding method that is affected by this situation.

43
00:03:51,160 --> 00:03:57,430
So in other words, with two way binding, we can make changes via the template as well as from our

44
00:03:57,430 --> 00:03:58,810
typescript file.

45
00:03:59,680 --> 00:04:00,250
You follow.

46
00:04:01,590 --> 00:04:07,050
Cool, because that's a great way to learn about two way communication.

47
00:04:08,590 --> 00:04:13,540
So basically, we've talked about our data mining methods and angular.

48
00:04:14,520 --> 00:04:16,230
You're going to put them to work a lot, I know.

49
00:04:17,590 --> 00:04:25,000
Now, I want to just tidy up a few small changes before we finish up here, so we're going to edit the

50
00:04:25,010 --> 00:04:26,620
sections that we prepared.

51
00:04:27,730 --> 00:04:31,330
Now, I'll comment the string interpellation to use here.

52
00:04:38,250 --> 00:04:40,980
And we'll print this value after pressing the button.

53
00:04:49,550 --> 00:04:52,460
Then I'll write it in typescript file with this method.

54
00:04:53,830 --> 00:05:00,130
And since we're using the two way binding method, this feature will now be updated to be two way.

55
00:05:01,220 --> 00:05:07,940
So now when you look at the browser right in this field and I can see this value when I press the button.

56
00:05:08,870 --> 00:05:14,090
So now when I press the button again without typing anything, we see the first value in the typescript

57
00:05:14,090 --> 00:05:14,420
file.

58
00:05:16,490 --> 00:05:19,110
It it just looks so much better that way, too, right?

59
00:05:20,210 --> 00:05:23,130
So, yeah, that's it, that's all you need to know about data binding?

60
00:05:23,150 --> 00:05:24,770
Well, at least it's enough for now.

61
00:05:25,830 --> 00:05:31,350
We're going to do some more details next time we'll talk about directive's in the next lesson.

62
00:05:31,410 --> 00:05:31,830
All right.

63
00:05:32,520 --> 00:05:33,300
I'll see you then.

64
00:05:34,260 --> 00:05:34,980
Bye for now.