This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Event Handling" Lesson
[00:00:00]
>> Lukas Ruebbelke: Now the question is, why is there this funny asterisk here? So this is synthetic sugar to essentially signal that this method is going to change the DOM. And it's going to either take away or add things too. So for instance, if you wanted to show something or hide something based on some condition, you would use ngIf, and it does very much the same thing.
[00:00:31] And so, using ngFor, we're able to iterate over this collection and display it here.
>> Lukas Ruebbelke: But,
>> Lukas Ruebbelke: We're putting data in, but what if you select one of these projects and you wanna capture that? Cuz so remember a component should do two things, capture enough data to render it in the template, and then capture user input and then essentially delegate that back up to the appropriate level.
[00:01:02]
>> Lukas Ruebbelke: We can use event binding to do that. And so when we capture an event, such as a DOM event, we can bind to that event and then use it to call something in our component class. So if we go here, and I'll just break this to another line so it's a little bit easier to read.
[00:01:26] And we basically wanna say any time somebody clicks on this item, we want to capture it. So, click. And let's go, selectProject, and because we are declaring this on the same element, that we can pass project in.
>> Lukas Ruebbelke: Click is a native DOM event, so in Angular JS you had ngClick, and ngMouseover, and there was all these custom directives.
[00:02:02] And they said let's do away with that. If it's a native DOM event, let's allow, you just bind to that directly. So click, we're going to capture that. And we're going to call selectProject in our component class, which notice, it's angry because it doesn't exist yet. And we're going to pass in the project that was clicked.
[00:02:25] And so angular is very good at keeping track of the item that you've clicked, and so there's actually kind of a local scope each item or part of that iterated sequence, and then servicing that back up. So now if we go back into our code here, we'll go selectedProject.
[00:02:51] So we'll declare it, but we're not going to initialize it. And then we'll go selectProject, which will take a project parameter, and then we'll go this.selectedProject = project.
>> Lukas Ruebbelke: But before that, well, let's do this. How about a little console log? SELECTED PROJECT,
>> Lukas Ruebbelke: Here, we'll go in here,
[00:03:28]
>> Lukas Ruebbelke: We just zoom this up. No, console. There we go. So you can see as I click on this that we're getting whatever you select. It's just basically capturing that and sending that data structure back to your component. So we have property binding if you wanna send data from your component into your template, you bind to it as a property.
[00:03:56] If something happens in your template and you wanna capture it, then you bind to it as an event that then calls a method on your component class.
>> Lukas Ruebbelke: Okay.
>> Student: Is that using a true event or do we need true events to go from component to another component?
[00:04:21] Or is this working because it's all on the same component? And is there tricks to get it to work if you want to eventually to go to a different component that displays that project? And that's probably where maybe you're going.
>> Lukas Ruebbelke: So I will talk about that. So the question is, is this a true event?
[00:04:36] And what if you wanted to service it maybe to another component? And so remember when I said capture user events and then delegate that up? So what I would do is I'd capture the event and then delegate the unit of work around that to, for instance, a service, or ngRx.
[00:04:56] Which would then basically push whatever needs to happen back down. So there's very much to this concept of the unidirectional flow, where data flows down, events flow up. I'lI talk about it a it more when we get into component of an architecture. But the idea is you wanna capture the event itself at the template level, or the parent template.
[00:05:20] And from there delegate it back up so that it's no longer an event, but you're rather just doing regular control flow through the application. Does that make sense?
>> Student: Yeah, yep, I was just merely curious because I didn't see any, I'm listening for this event kind of a thing that you did and that, okay.
[00:05:37]
>> Lukas Ruebbelke: So under the hood is that, and we'll talk about custom events, but it's literally capturing that DOM event. In fact, so I'm changing parameter to event. This may or may not work, but let's see what happens.
>> Lukas Ruebbelke: Project is not defined? Hold on. We can just chop that out and post.
[00:06:07]
>> Lukas Ruebbelke: So now, if you can look here, this is truly like the mouse event is firing. But that's not what we want. But we're using that mouse event to trigger and say call this thing. But instead of passing in the event what we wanna pass in is the actual object itself that we have a local reference to.
[00:06:31]
>> Lukas Ruebbelke: So,
>> Student: In this case, would project be the second parameter in the function that comes in, because you have that special $event?
>> Lukas Ruebbelke: Why not try it?
>> Lukas Ruebbelke: So we'll go here, and this actually may work, and Marc may have just changed my life. But I know at one point, this did not.
[00:06:54] And so I typically think of it as a single object that's coming through that.
>> Student: My gosh.
>> Lukas Ruebbelke: What?
>> Student: [LAUGH]
>> Lukas Ruebbelke: I'm so happy.
>> Lukas Ruebbelke: So what would happen?
>> Lukas Ruebbelke: So let's go,
>> Lukas Ruebbelke: MARC IS AWESOME.
>> Lukas Ruebbelke: Actually I did that wrong, it goes in here, MARC IS AWESOME.
[00:07:35]
>> Lukas Ruebbelke: And here, we'll go echo,
>> Lukas Ruebbelke: If this works, I'm buying Marc a donut.
>> Lukas Ruebbelke: Donut time.
>> Lukas Ruebbelke: So apparently from DOM events or capturing DOM events you can actually stack them. Once we get into inputs and outputs, we'll try it again, but I don't think that will work.