1
00:00:00,480 --> 00:00:01,420
Hello again, everyone.

2
00:00:02,250 --> 00:00:09,420
So we've reviewed string, interpellation and property binding, and these two communication methods

3
00:00:09,420 --> 00:00:13,650
are interacting from typescript to template.

4
00:00:14,710 --> 00:00:21,990
However, as I'm sure you remember me mentioning before, sometimes this interaction can be from user

5
00:00:21,990 --> 00:00:22,740
to class.

6
00:00:23,640 --> 00:00:26,250
So here is where event binding comes in.

7
00:00:27,080 --> 00:00:32,110
Nonetheless, the lesson we created a button and we made it or falls with property binding.

8
00:00:32,910 --> 00:00:38,370
So in this lesson, I want to show you the interaction from template to class by clicking this button.

9
00:00:39,590 --> 00:00:42,580
So we were going to talk about event binding.

10
00:00:43,630 --> 00:00:50,920
So let's say that I want to edit a little bit of what we did last lesson comment here for now.

11
00:00:50,920 --> 00:00:56,340
And again, I want to continue with this button, so I'll show you a small example to understand.

12
00:00:56,360 --> 00:01:02,590
Event binding a little deeper than will continue with some arrangements to our project.

13
00:01:03,560 --> 00:01:09,140
So now when I press this button, I want to print hello on the console first.

14
00:01:09,260 --> 00:01:13,040
OK, so for this, I am creating a string variable.

15
00:01:15,740 --> 00:01:19,250
I'm using it in the method that I'm going to create here.

16
00:01:27,250 --> 00:01:33,520
Cool, so now that that set up, it's time to learn how to use event binding so now will write the name

17
00:01:33,520 --> 00:01:38,040
of the event in parentheses where we define the button in the e-mail file.

18
00:01:38,650 --> 00:01:44,680
So I'm typing click here, then I'll put it cool.

19
00:01:44,710 --> 00:01:48,430
And between quotation marks, we call the method.

20
00:01:50,640 --> 00:01:53,970
So here we have made use of event binding.

21
00:01:54,920 --> 00:01:59,500
In fact, when you look at it this way, it looks like using property binding, doesn't it?

22
00:02:00,380 --> 00:02:05,540
So we use square brackets for property binding and parenthesis for event binding.

23
00:02:06,530 --> 00:02:11,660
OK, so now it's time to examine in the browser what we've just done.

24
00:02:12,570 --> 00:02:17,480
So I'll open up a console and I haven't pressed the button yet.

25
00:02:19,960 --> 00:02:21,610
So I don't see the word hello, right?

26
00:02:22,910 --> 00:02:27,020
Now I press a button and a council now says hello and yeah.

27
00:02:28,280 --> 00:02:32,390
As you can see here, we communicated by pressing a button on the template.

28
00:02:33,630 --> 00:02:34,120
Cool, cool.

29
00:02:34,170 --> 00:02:36,780
So that is a pretty strong example.

30
00:02:37,850 --> 00:02:44,100
Of that communication, so now we've assumed that we created this button to add a product, right.

31
00:02:46,660 --> 00:02:50,280
So I want to edit the method and the article here accordingly.

32
00:03:20,800 --> 00:03:25,480
And then I will use this article with string interpellation for status tracking.

33
00:03:35,850 --> 00:03:36,430
Look at this.

34
00:03:36,500 --> 00:03:41,010
When I look in the browser, I don't see the string interpolation that I just created.

35
00:03:42,240 --> 00:03:50,820
But now I can see, as you see, you and I press the button because we have interacted with this button

36
00:03:51,480 --> 00:03:52,350
just by pressing.

37
00:03:53,520 --> 00:03:59,010
OK, so now there's something else that we need to know about this event, binding business.

38
00:04:00,860 --> 00:04:07,610
So to illustrate, I'll create an input field in the HTML file, and here we will allow the user to

39
00:04:07,640 --> 00:04:15,500
enter the product name and we'll trigger the update method and we will create by listening to the input

40
00:04:15,500 --> 00:04:15,920
event.

41
00:04:16,650 --> 00:04:19,590
So now let's do these things in practice and make it clear.

42
00:04:20,240 --> 00:04:30,170
So first of all, create a label here and then add input field, which type is text and also add a form

43
00:04:30,170 --> 00:04:31,550
and control as class.

44
00:04:37,080 --> 00:04:40,320
So now let's look at what will be the response.

45
00:04:41,340 --> 00:04:45,960
And the value is added in this input field, that is when the event occurs.

46
00:04:46,910 --> 00:04:53,000
So I'll open parenthesis for this and I'll write input and then the method we will prepare in the typescript

47
00:04:53,000 --> 00:04:55,760
file and the parameter that it's going to take.

48
00:04:58,070 --> 00:05:00,710
Of course, these are between quotation marks.

49
00:05:02,430 --> 00:05:07,260
Now, here will define the parameter with dollar sign and event.

50
00:05:08,270 --> 00:05:15,590
So here dollar sign event is important that it conveys information about the event and we can use it

51
00:05:15,890 --> 00:05:18,710
in the template when using event binding.

52
00:05:19,910 --> 00:05:28,760
So this information can include data values such as an event object string or no named, you know,

53
00:05:28,760 --> 00:05:29,750
dollar sign event.

54
00:05:30,710 --> 00:05:35,560
So dollar sign event will simply be the data emitted with that event.

55
00:05:36,770 --> 00:05:45,170
So input and click are default events provided by the DOM that you can say and send some data when trigger.

56
00:05:46,460 --> 00:05:53,420
And the click event gives us an object holding, for example, the coordinates that we collect and the

57
00:05:53,420 --> 00:05:56,930
input event also gives us some data.

58
00:05:58,190 --> 00:06:00,500
Some information about the event.

59
00:06:01,850 --> 00:06:09,200
We can now capture this data with an event which is passed as a parameter to the method.

60
00:06:10,580 --> 00:06:13,070
All right, yeah, that makes sense.

61
00:06:15,510 --> 00:06:18,540
All right, so now it's time to prepare our method in typescript.

62
00:06:20,360 --> 00:06:26,540
Well, right, our method, and it'll take a variable of type as any parameter.

63
00:06:34,020 --> 00:06:38,790
And we'll print this on the console to keep track of what it is that we're doing.

64
00:06:44,240 --> 00:06:50,150
So to keep track of our transactions, examining the console will be, well, that's what it's there

65
00:06:50,150 --> 00:06:50,630
for, right?

66
00:06:50,640 --> 00:06:51,890
So it's convenient for us.

67
00:06:53,800 --> 00:06:56,260
Now we can see what we do in the browser.

68
00:06:58,150 --> 00:07:04,720
So sure enough, there have been changes and I wrote something in his input, and when I look at the

69
00:07:04,720 --> 00:07:06,700
console, I'll expect to see this value.

70
00:07:07,650 --> 00:07:15,390
It's now open up the console and I'll see a long string of information, actually, there are as many

71
00:07:15,390 --> 00:07:17,580
triggers here as the letter we wrote.

72
00:07:18,330 --> 00:07:20,550
So I'm going to scroll down a bit.

73
00:07:20,550 --> 00:07:22,380
And here I'll look at the target.

74
00:07:22,380 --> 00:07:25,070
And here I see the value, the text.

75
00:07:25,470 --> 00:07:33,180
And sure enough, we enter text in an input field and we provided a new trigger every time we hit a

76
00:07:33,180 --> 00:07:33,570
letter.

77
00:07:35,990 --> 00:07:40,970
So now I want to sign this text in a variable and see it on the template.

78
00:07:42,080 --> 00:07:45,410
So for this, I'll define a string variable in the file.

79
00:07:52,750 --> 00:07:57,460
And I want to use this variable in this method and its methods parameter is event.

80
00:07:59,160 --> 00:08:07,110
Now, we should pay attention to writing while using this parameter, our variable is event dot, target

81
00:08:07,110 --> 00:08:12,120
dot value and this variable is HTML input element.

82
00:08:13,330 --> 00:08:15,910
And don't forget to put it in parenthesis.

83
00:08:17,060 --> 00:08:21,440
So when using it here, we'll first declare element and then.

84
00:08:23,200 --> 00:08:25,240
We want to equalize the value.

85
00:08:26,430 --> 00:08:28,230
So we should pay attention to this.

86
00:08:32,250 --> 00:08:37,290
And now we can see this variable with string interpellation on the template.

87
00:08:44,910 --> 00:08:46,920
All right, so you followed all that.

88
00:08:47,830 --> 00:08:52,420
Now, let's have a look and see what it looks like on the browser, yeah.

89
00:08:53,160 --> 00:08:56,700
OK, so I entered the value in the input field.

90
00:08:56,710 --> 00:08:58,060
I can see that right away.

91
00:09:00,050 --> 00:09:04,190
And we see the change in the template with the triggering of an input element.

92
00:09:05,870 --> 00:09:11,920
All right, so I think that's enough for this particular lesson and it completes the examination of

93
00:09:11,920 --> 00:09:18,430
one way data mining methods, we learn what happens and how to use these methods.

94
00:09:19,150 --> 00:09:22,780
So we're going to talk about two way binding in the next lesson.

95
00:09:23,200 --> 00:09:24,250
So I hope to see then.

96
00:09:25,240 --> 00:09:27,580
Until the next lesson, goodbye for now.