Check out a free preview of the full Angular Core course:
The "Details Component" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas implements the details component in the app.

Get Unlimited Access Now

Transcript from the "Details Component" Lesson

[00:00:00]
>> Speaker 1: Let's do the details component. So if we go into our project details component,
>> Speaker 1: So it's looking for selectedProject, as well as saveProject. So what I'm gonna do is I'm going to just take this event handler off For now, we can put it back. Select a project, and let's take this off as well.

[00:00:48] All right so, obviously we need a select a project input. So, if we go into the component,
>> Speaker 1: How do we do that? Well, input, so input,
>> Speaker 1: It'll go,
>> Speaker 1: Let's just do this. We'll call it project. Makes sense. So I think really select a project is like a concern of actually that parent component.

[00:01:27] Like this is the selected project, internally it's just says hey, this is a project. And let's also, since we're here, let's do output of,
>> Speaker 1: saved. Now, remember when you create an output, you need to instantiate it as an EventEmitter.
>> Speaker 1: Make sure that I got output imported.

[00:01:55] Good, good, good. And we'll call this cancelled. Seems pretty reasonable.
>> Speaker 1: This is not happy that we're not implementing OnInit, we don't really need it, so we'll just take that off,
>> Speaker 1: And this takes selectedProject because that doesn't exist on our component class, and let's just change that.

[00:02:39]
>> Speaker 1: So already, we say what's going on? Can't read property "id" of undefined. Well, we saw that coming. Let's go in to our project component, and let's bind to project equals. Was it selected project? There we go. Save this,
>> Speaker 1: Must have that console log still in there.

[00:03:23]
>> Speaker 1: No. It's still happening. [LAUGH] I knew that was gonna happen. Playing with you guys. So let's just hook up our EventMeters real quick. So saveProject($event),
>> Speaker 1: And we'll duplicate this, and we'll go canceled.
>> Speaker 1: This is just cancel, all right? So this is pretty much what I would expect.

[00:04:06] Kinda am in a pretty stable spot, let me just back this up.
>> Speaker 2: And those names.
>> Speaker 3: Are you showing the console your error? Our error?
>> Speaker 1: What's that?
>> Speaker 3: The console. This error. [INAUDIBLE] That error?
>> Speaker 2: The one?
>> Speaker 1: Yeah, yeah.
>> Speaker 2: Okay.
>> Speaker 1: Okay. What's that?

[00:04:29]
>> Speaker 2: No, that's right.
>> Speaker 1: Is this right? Let me see.
>> Speaker 2: Yeah.
>> Speaker 1: Cancelled so this is the event. And so I'm listening for this event. So if I called this wahoo, then here I'd have to change it. So I'm defining like this is the event that I wanna listen for, and then here in the Cancel event we're just resetting the project.

[00:04:52] So we're starting to see kind of like data in, events come out.