Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Challenge 12: Solution" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through the solution for Challenge 10. Lukas takes questions from students.

Get Unlimited Access Now

Transcript from the "Challenge 12: Solution" Lesson

[00:00:00]
>> Lucas: Let's jump in and solve this challenge. We're basically creating a status component. So first thing's first.
>> Lucas: How do I wanna do this? Do this from the command line so ng g C Status. I'm just gonna put it, we're not nesting it or anything. Then we'll do /m and it's app.module.ts.

[00:00:31]
>> Lucas: So component is created. Let's hop into our code, and let's go into our home component. So we're operating under the assumption that the status component is been added to our module. So the next thing is that once you generate it from the CLI, it's ready to go.

[00:00:55] So in our home component
>> Lucas: home.component.html
>> Lucas: I'll just go ahead and add this so, believe it's gonna be app-status.
>> Lucas: And let's see if this renders.
>> Lucas: Status works. Okay so that is, I think even with commentary that took me like three minutes or less. So getting components up and running and in your application, very, very easy.

[00:01:36] So now let's go ahead and do the property binding. So we're sending something from the parent into the child. So when you're doing an input or when you're doing inputs and outputs, those are defined at the child component. So the child component is saying, this is what I'll accept in and this is what I'm going to communicate out.

[00:02:00] So we'll go input, and remember this is a function you have to call it or you'll run into problems. And we'll just go currentStatus.
>> Lucas: Okay, so now that we've created this input, we now have a property that we can bind to on the parent component. So if we go over to the home component,

[00:02:31]
>> Lucas: You'll notice, hopefully, WebStorm picks this up, currentStatus. This is, whew, and I'm just gonna put something here, we'll just say myStatus. This doesn't exist yet, but this is what we wanna populate it with. So let's go back to home.component.ts and let's go myStatus and we'll just say active.

[00:03:08]
>> Lucas: Okay, so now we've set it on the parent component and we are passing it to the child component, the others property. So they're basically binding on the same property. So if we then go to status components, let's actually go status component.html.
>> Lucas: We'll go h1,
>> Lucas: My Status

[00:03:40]
>> Lucas: currentStatus. And so now we're saying, when this comes in, go ahead render it in the child template. So if we go back here, the current status is active. Let's take this one step further just so we can show you that when it changes on the parent, it changes in the child.

[00:04:05] So I'm going to borrow an element.
>> Lucas: From this form over here. Let's hop back into the home component.
>> Lucas: And for this will go in g model. Now one thing I need to do is double bind this,
>> Lucas: Go ahead and set a placeholder here and what I'll do as well, let me just kinda start to break this out, just cuz we only have so much space.

[00:04:55] So we are going to bind this input using two way data binding to myStatus. So whenever my status changes, it's going to change here. And therefore, it'll effect currentStatus in the child component if all goes well.
>> Lucas: So you can see this is, because it's two-way, it's already pre-populated.

[00:05:25] So we're sending this property from the class into the template. But because we're event binding, when I type in here, you can see that it's basically raising that event and saying, hey, the template was updated for component class, you need to update yourself. So you can chang this to whatever.

[00:05:50] So this is input binding, so as we change it on the parent, it changes on the child.
>> Lucas: And what's nice about this is that if we go back to our status component, no logic, just pulling it in and just automatically rendering it in to the template. Now let's go here and let's create an output.

[00:06:17] So we wanna have some event within the component that is going to indicate the parent that we need to change the status to something else. So let's go output. This is also method and we'll just call this logout. Now this is
>> Lucas: An EventEmitter
>> Lucas: And what's funny is, this is actually inspired by the node EventEmitter, well this is why you get a few options here.

[00:06:49] We're gonna go with one from angular core.
>> Lucas: And so now, if you go back to the home component,
>> Lucas: That's not the home component, this is the home component. And you can imagine that there's going to be a logout event. Well, thank you WebStorm. Log out and then from here, we'll go into define my event handler.

[00:07:21] And obviously, it's saying, hey, this doesn't exist. So we'll go ahead and define this and so we'll say, log out.
>> Lucas: Just take the event even though i don't really care about it. And we'll go this, my status equals LOGGED OUT.
>> Lucas: Now we're almost there. We got one more piece.

[00:07:54] We need to actually fire it from the child component. So going back to here, I'm just going to steal this button, rather steal this button into our template.
>> Lucas: Just like the horizontal rule everything, and from here,
>> Lucas: Logout.emit and we'll just send the event.
>> Lucas: Even though we don't really need it, we can over here.

[00:08:34] So hopefully this renders, boom. And notice, so now from the child, we were saying this event was clicked, parent you handle it, you decide what to do. So this is very common, a lot of times I have a three year old and a six year old, my three year old would come to me and he'll just have something that is totally broken.

[00:08:59] He's just like, what do I do? This happened, what do I do? As the parent, I'm responsible for them exercising sound judgement and making the right decision. And so, this is very much of a child saying, I don't know what to do, you handle it, you're the parent.

[00:09:15] And from here, again just going back, what I love about this and I keep saying this over and over, is that
>> Lucas: This component
>> Lucas: There's not really any moving parts. And so, if it is actually a presentational component or a dumb component, I'll even parse it down and just take out on init, just to say that this is just binding, this is all we're using.