1
00:00:00,570 --> 00:00:01,620
Hello again, everyone.

2
00:00:01,650 --> 00:00:09,890
So up until this lesson, we have only talked about the binding process from component to template.

3
00:00:10,920 --> 00:00:14,220
So that means in this lesson we're going to talk about event binding.

4
00:00:15,910 --> 00:00:23,800
And as you know, event binding is a bind from template to component, because you know the definition,

5
00:00:24,160 --> 00:00:28,000
but you might not have ever practiced it now.

6
00:00:29,450 --> 00:00:32,930
When we talked about this earlier, I just gave you some basic information.

7
00:00:35,080 --> 00:00:44,290
So let's review it now when we press the button on the template, it starts an information flow and

8
00:00:44,290 --> 00:00:47,300
it provides information to the component.

9
00:00:49,060 --> 00:00:53,440
So that means for this we first want to create a button in the HTML file.

10
00:01:07,240 --> 00:01:16,450
And I define a quick event in the button, and I'll equalize this to the method that we will prepare

11
00:01:16,450 --> 00:01:17,710
in our file.

12
00:01:19,310 --> 00:01:26,120
All right, so now we can prepare the method and actually what I want to do here is see the console

13
00:01:26,120 --> 00:01:27,230
when I press the button.

14
00:01:38,620 --> 00:01:47,200
And when we look now, I'm pushing the button and the browser, and when I do that, I can see it working

15
00:01:47,200 --> 00:01:47,980
in a console.

16
00:01:49,870 --> 00:01:53,840
So now there's another important point to illustrate here, right?

17
00:01:54,760 --> 00:01:58,150
We were writing an event here to track the event.

18
00:02:01,870 --> 00:02:09,100
And the method can be used in the same way, so I can print this event on the console.

19
00:02:15,540 --> 00:02:19,890
So now when we press the button again, we can see both this article and the event.

20
00:02:21,450 --> 00:02:23,160
Now, I'll add a few more buttons.

21
00:02:24,550 --> 00:02:29,170
All right, so let's talk about why it's important to follow the event here, so I'll give the buttons

22
00:02:29,170 --> 00:02:29,890
and name.

23
00:02:43,050 --> 00:02:49,830
And for now, let's followed again browser, so I'll hit the first button and I click on the event from

24
00:02:49,830 --> 00:02:50,510
the console.

25
00:02:51,450 --> 00:02:58,910
Now here, when I look at the source element, I can see which button we've pressed.

26
00:03:00,210 --> 00:03:03,480
Likewise, we can follow actions for the other buttons.

27
00:03:07,250 --> 00:03:12,590
Now, there's one other thing that I want to show you here, so I'm creating a div and I'll get the

28
00:03:12,590 --> 00:03:14,570
buttons inside this div.

29
00:03:15,350 --> 00:03:21,380
I also define a click event for this div and then I set a field and.

30
00:03:30,170 --> 00:03:32,930
So let's create a method in its final.

31
00:03:52,160 --> 00:03:58,970
And when you look in the browser, whatever button we press, div click is triggered because it is in

32
00:03:58,970 --> 00:04:06,260
this div, but when we click somewhere and the div area, only the div event is affected.

33
00:04:07,400 --> 00:04:08,610
So I press this button.

34
00:04:08,630 --> 00:04:10,370
I don't want that to be affected.

35
00:04:11,900 --> 00:04:20,180
Now we can use events, stop propagation method and that will prevent the situation.

36
00:04:27,070 --> 00:04:35,380
So I just come on over here to the browser, pressed the button and just the buttons affected and that's

37
00:04:35,380 --> 00:04:36,250
the way we want it.

38
00:04:36,730 --> 00:04:42,100
All right, my friends, so that is event binding in practice.

39
00:04:42,550 --> 00:04:43,750
So I'll see you next lesson.