This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Event Binding" Lesson
[00:00:00]
>> We've done straight interpolation. We've done property binding. And we've done two way binding. But I want to do one more. And this is event binding. And so we'll go back in, here and I'm going to just do, see if I get a map button. There we go.
[00:00:28] Now you'll notice when I generated this, using this code, the VS code extension or plugin that I had, it went ahead and generated this for me. So let's do something here. I'm gonna change this to update. And I'm gonna say update color. And when we go and we do click, It's going to call this method.
[00:01:03] So we're binding to an event. And so if I go back here. Now notice we don't have a method called update color yet, so I'll go update color. And who can think of the most amazing color in the world? Let me think here. Salmon, somebody said salmon, I agree.
[00:01:29] So, what we're gonna do here, we're going to go this.themecolor = salmon. And what I'm also going to do is console.log UPDate COLOR WHOOP WHOOP. Okay? So back into our code. And when I click this, what's going to happen, it's going to capture that click event. And it's going to call the method on the component class.
[00:02:06] And so I'm gonna pull up the console here. And when I click down here, UPDate COLOR WHOOP WHOOP, I don't know if I really need to zoom in but you can kinda see that, is it's capturing the native DOM event and then it's calling the method on the component, which in this case is UPDate COLOR.
[00:02:35] And so we're logging out so we can see it, but, more importantly, is when I did this, I captured this event and then updated this property on the class which then rippled through the rest of our bindings. Now let's talk about this template and what's happening here just briefly.
[00:02:58] You'll notice that we're taking click, and we're wrapping parentheses around it. Well, we can do this with really any DOM event. And so I haven't done all of these, but for instance, if you go to, I think MDN DOM events. Event reference, so this is the Mozilla Developer Network.
[00:03:31] You can see just a ton of DOM events that exist, native DOM events. And you can actually bind to any of these DOM events in the browser. And the difference is that in AngularJS, what they had done, and let me see if I can find a real quick example of this.
[00:04:00] This is actually a pretty good example. It's always so weird looking at this, but you'll notice like ng-submit, is that they essentially created this wrapper for every single event that they wanted to surface. And they said like, let's not do that anymore. Instead, let's just bind to the native DOM events, and not have to write a bunch of extra code.
[00:04:26] And so we can take for instance Mouseenter, I could go back into the template here, and I can bind to this DOM event. So I'll save this, and with a little bit of luck, that when I mouse over, notice it captured that event. And so this is really really really powerful because now, any DOM event that's being surfaced, and there's a lot of them, is you can now capture and essentially leverage and then use that as a hook back into your component.