Hello again, everyone.
So up until this lesson, we have only talked about the binding process from component to template.
So that means in this lesson we're going to talk about event binding.
And as you know, event binding is a bind from template to component, because you know the definition,
but you might not have ever practiced it now.
When we talked about this earlier, I just gave you some basic information.
So let's review it now when we press the button on the template, it starts an information flow and
it provides information to the component.
So that means for this we first want to create a button in the HTML file.
And I define a quick event in the button, and I'll equalize this to the method that we will prepare
in our file.
All right, so now we can prepare the method and actually what I want to do here is see the console
when I press the button.
And when we look now, I'm pushing the button and the browser, and when I do that, I can see it working
in a console.
So now there's another important point to illustrate here, right?
We were writing an event here to track the event.
And the method can be used in the same way, so I can print this event on the console.
So now when we press the button again, we can see both this article and the event.
Now, I'll add a few more buttons.
All right, so let's talk about why it's important to follow the event here, so I'll give the buttons
and name.
And for now, let's followed again browser, so I'll hit the first button and I click on the event from
the console.
Now here, when I look at the source element, I can see which button we've pressed.
Likewise, we can follow actions for the other buttons.
Now, there's one other thing that I want to show you here, so I'm creating a div and I'll get the
buttons inside this div.
I also define a click event for this div and then I set a field and.
So let's create a method in its final.
And when you look in the browser, whatever button we press, div click is triggered because it is in
this div, but when we click somewhere and the div area, only the div event is affected.
So I press this button.
I don't want that to be affected.
Now we can use events, stop propagation method and that will prevent the situation.
So I just come on over here to the browser, pressed the button and just the buttons affected and that's
the way we want it.
All right, my friends, so that is event binding in practice.
So I'll see you next lesson.