Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Challenge 8: @Input and @Output" 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:

In this challenge, students create widgets-list and widget-details components using @Input and @Output. Lukas takes questions from students.

Get Unlimited Access Now

Transcript from the "Challenge 8: @Input and @Output" Lesson

[00:00:00]
>> Lukas Ruebbelke: So this is gonna be a little bit of a longer one. I wanna give everybody at least a half an hour to do this. So what you want to do is break your widgets-list and your widgets-detail form into two child components. And then wire them up using Input and Output.

[00:00:20] So for the widgets list, obviously pass in the widgets using a widgets-input. Capture the selected event from the widgets list, pull it out, and then display the selected widget in the widget-detail component. So essentially, what we're doing is taking what we've already worked on, and we're just breaking it into two components and wiring it back up with inputs and outputs.

[00:00:42] What I would also do is create a deleted, saved, and cancelled output. So, I recommend two things. One, using item, the items component, item detail, item list, see how we're doing it there. Use that as a reference point for what we're doing in the widgets, the pattern is the same.

[00:01:04] Also, I've given everybody a hint. I recommend using, in this case for the sake of time, the generator, is that you can generate widgets-list, widget-details using basically this command. So this is how I do the list but, obviously, I think it's pretty easy to figure out how to do widget details as well.

[00:01:26] So this is just a little hint I've dropped at the bottom of this, for reference. All right, so let's break for lunch. And so we'll give one hour for lunch and then 30 minutes for the challenge. Any questions before I turn you loose?
>> Lukas Ruebbelke: Why is everybody so happy right now?

[00:01:53] [LAUGH]
>> Speaker 2: In the shared mutable state, or rather in the state where you are directly assigning it to the object, if you go back a couple of slides there.
>> Lukas Ruebbelke: You're talking about this?
>> Speaker 2: Yes. So if you do, for the time being, you can just comment the lines 15 to 18.

[00:02:18] And directly have the line 11 have an input.
>> Lukas Ruebbelke: So, in fact, I encourage you when you start out,
>> Lukas Ruebbelke: Do this, input () Item, and tell me what happens when you start to edit it.
>> Speaker 2: Right, so I did that, okay. And? There, what happens is that when you click on something and if you edit something here, it edits into the list directly.

[00:02:55]
>> Lukas Ruebbelke: Shared mutable state.
>> Speaker 2: Okay, but the thing is that when we, I mean does it impact how the form is loaded?
>> Lukas Ruebbelke: How so?
>> Speaker 2: So, the connection; I mean, this particular component is, so when you click on any of these items, right, on the parent, okay.

[00:03:17] The sub component of the child and all of its things like form and everything are initiated already? Or they are started already? Because no action has initiated that component, right? So that the presentational state of that component, which the child, what is it? If you had to put a lifecycle loop here and put an NGR on it, would it say that it is initialized already?

[00:03:47] Because the input and output have not yet, I mean, there has been no input to it, okay, there has been no output to it.
>> Lukas Ruebbelke: So the minute there is, right, well it will, in this case, we're sending in an empty object. We're pre-populating, like so.
>> Speaker 2: Okay, so will an empty object already come in and then that component initialized, or If I want to say that, don't initialize the component unless a valid input is in there.

[00:04:19]
>> Lukas Ruebbelke: So if the component's on the template, on its parent cell, it's going to get initialized. It's going to be added to the stage, unless you use, for instance, ngIf. So you can say, I mean, I could do something like this. So let's say there is no current item.

[00:04:35]
>> Lukas Ruebbelke: And this may make sense for,
>> Lukas Ruebbelke: So in this way, I'm saying don't actually add this component to the dom until somebody has selected this.
>> Speaker 2: Okay, that's what I was looking for. Okay, that way I don't show the form unless someone actually goes and selects.
>> Lukas Ruebbelke: But then how would you create an item?

[00:05:02]
>> Speaker 2: Yeah, if the same form is used for both the programs, yes.
>> Lukas Ruebbelke: In some cases, you may not want to show it until it is selected, and I've done that as well. So if somebody is going to register something, don't show them the register form until they click it, it's pretty simple