Check out a free preview of the full Building Awesome Web Apps with Angular 2 course:
The "Review of Component Contractorts" Lesson is part of the full, Building Awesome Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

While reviewing @Input and @Output decorators, Lukas takes questions from students.

Get Unlimited Access Now

Transcript from the "Review of Component Contractorts" Lesson

[00:00:00]
>> Lukas Ruebbelke: This is a bit mind-bending. And I do not want to rush this at all. Because I think our success as Angular 2 developers, is really contingent on us having a firm grasp of this concept, right here. And so, first and foremost, I want to open up the floor.

[00:00:23] I mean, I would imagine everyone sitting here with questions. Even, conceptually, you may grasp it, but I'd like to get your take on it.
>> Speaker 2: I can't see them, but I'm sure there are thousands of question marks happening in Chat World.
>> Lukas Ruebbelke: Right.
>> Lukas Ruebbelke: So what do you guys think about this?

[00:00:44] Is it cool? Does it make sense?
>> Lukas Ruebbelke: So let's just back this up just a bit,
>> Lukas Ruebbelke: Cuz the secret, I believe, is,
>> Lukas Ruebbelke: Let me figure out where my slides went. Just wanna really go back and ask you revisit,
>> Lukas Ruebbelke: I think my keynotes just totally calmed down.

[00:01:13] There it is.
>> Lukas Ruebbelke: Let's go back to this.
>> Lukas Ruebbelke: So we have a pretty good grasp on how to capture events with event binding. So up to this point, any DOM event we were able to capture primarily click is and kind of our favorite one. And then when we want to pass data from the class to the template, we use property binding.

[00:01:51]
>> Lukas Ruebbelke: Well, taking these, or this concept we can extend it to communicate with child components. And so really when I think of inputs and outputs, I just think of custom property and event binding. That is at the core what you're doing. Is you're simply saying at the child component with an input I am creating a property that is going to get it's value from the parent component.

[00:02:23] When I create an output, I am creating an event that's going to be handled by the parent component. And so think of this as really, your parent component or lord overseer component. Simply saying, this is what you're gonna display, and if anything happens, come and tell me and I'll handle it.

[00:02:48] Which, really on the surface, essentially frees up your child component from really any responsibility. How convenient it would be if everything I needed to survive was just provided for me. And any conflict in my life or anything that happened to me, I'm just like, hey this thing happened, go deal with it.

[00:03:11] And that's why you have these really small presentational components because they get everything they need and if anything happens, they just tell their dad or their mom or their parents, okay? So, in theory, I think we can kind of wrap our minds around that. I think that what we should do.

[00:03:32] How much time do we have? What do we have for lunch, Mark?
>> Mark: Mediterranean.
>> Lukas Ruebbelke: Mediterranean.
>> Mark: Euros, I think.
>> Lukas Ruebbelke: Euros, I'm trying to see if I have enough time to do a quick demonstration, before I turn everybody loose for lunch and a challenge.
>> Mark: That's fine with me.

[00:03:52]
>> Lukas Ruebbelke: Okay, let's just do an easy one.
>> Lukas Ruebbelke: Granted, this is a bit of a heavy concept, I think, mentally, we're wrapping our minds around it. Now we just have to do it a thousand times. But even to that, every time I have an opportunity, it's like, well, I can use the practice.

[00:04:11] Yes, Tamara.
>> Tamara: David has a question about how did your click on an item as opposed to hover or any other event get tied to select it.
>> Lukas Ruebbelke: Yes.
>> Tamara: I think you've covered it, but-
>> Lukas Ruebbelke: I have, but let me just go back and, let's revisit it.

[00:04:27]
>> Lukas Ruebbelke: What is going on here? It was weird. Okay, pair component. So I'm in the items.component.html. And we have a selected event. How is that hitting fired?
>> Lukas Ruebbelke: If we go to our items-list.components, so this is the template for the child component, we have a click right here on the ngrepeat.

[00:04:57]
>> Lukas Ruebbelke: And so let's actually do something here. Well, first and foremost, what I can do, so this is click and then that's what I'm using the DOM event to actually trigger my output. Let's think of another I think I can do.
>> Lukas Ruebbelke: Let's just pick another DOM event, so mouse center.

[00:05:24] So now we have a DOM event with a child component, hey, this thing happened, let's tell our parents.
>> Lukas Ruebbelke: Let's go back here.
>> Lukas Ruebbelke: So now as I just mouse over,
>> Lukas Ruebbelke: I'm capturing the mouse center events and I'm using that to trigger my output. Make sense? So it's just whatever your output is, which is an instance of a you just call output.omit and then you pass in whatever information you want.