Check out a free preview of the full Build Web Apps with Angular 2 course:
The "@Input & @Output" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Lukas explains the @Input and @Output decorators. These decorators are defined in a component class and bound within the component’s template. The @Output decorator also exposes an EventEmitter property that will dispatch an event to the parent component.

Get Unlimited Access Now

Transcript from the "@Input & @Output" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Lukas Ruebbelke: So @Input, we simply define this inside of our component, that this property is being populated via an input. Then on the parent template we use a property binding to say whatever we put into this property, whatever value this is getting passed to this component.
>> Lukas Ruebbelke: And so, this is what this looks like.

[00:00:37] In the component here, we're saying that my component, in this case, we have a greeting property and in the parent component then we are defining the greeting property. And we are sending in 'Hello, Child". Now you'll notice that I did not set a default here. Well, I set a default, so if it did not get defined, then it would just go to the default.

[00:01:07] So let's actually just hop into some code real quick and see what this looks like.
>> Lukas Ruebbelke: And so, this in the passing data to a component plunk.
>> Lukas Ruebbelke: And you can see here, this is what we saw. We have in our my component, we have an input that is, we're basically setting greeting, and so we're binding this.

[00:01:38] And then from here, we can just use string interpolation to display it in the template. And then we're passing it here when we define this. So, if we go back to our code, just pull this aside here. You can see I have greeting and I'm passing this in to my component.

[00:02:12] But in here I'm not, so let's do just another one
>> Lukas Ruebbelke: When you say goodbye to somebody, what's the opposite of greeting?
>> Speaker 2: [INAUDIBLE]
>> Lukas Ruebbelke: Salutation, sure.
>> Speaker 2: [INAUDIBLE]
>> Lukas Ruebbelke: I don't know. Goodbye. So this is just a property on the parent component. And then let's just go ahead and salutations, so we're going to property bind to this.

[00:02:47] Equals salutation. And then within our shell component here string equals,
>> Speaker 3: Do you hit the typo?
>> Lukas Ruebbelke: What's that?
>> Speaker 3: Do you hit [INAUDIBLE]?
>> Lukas Ruebbelke: You do not have to. But because Scott did, I did. When-
>> Scott Moss: Is it lower case string or upper case string [INAUDIBLE]?
>> Lukas Ruebbelke: I've been using upper case.

[00:03:33] And place n for number, but I don't think it actually matters the run time because it get's struck out anyways.
>> Scott Moss: Okay.
>> Lukas Ruebbelke: Yeah. So the answer to that is, it's good enough, either way I think.
>> Scott Moss: Whatever you want.
>> Lukas Ruebbelke: Whatever I want, okay? And we'll just duplicate this here.

[00:03:57]
>> Scott Moss: I just want to say one thing. If you're coming from React, inputs and outputs are really just props, all right? An input is a prop that you're passing into a component, an output is a handler on it, or some type of event on a callback. Same thing.

[00:04:15]
>> Lukas Ruebbelke: If you're coming from Angular 2, that's exactly how it works as well. I mean, that's it, something goes in some event has fired and we need to handle it on the parent component. And, so let's go ahead and re-render this.
>> Lukas Ruebbelke: So now you can see that on the two components you got the default salutation on the top one, and the custom salutation on the bottom onw, the reason being is because in the App TS, I said greeting on the top one and salutation on the bottom one.

[00:05:04] Pretty straight forward, any questions on that? Want to pass something into my component, put an input on it.
>> Lukas Ruebbelke: One other thing worth mentioning here is that you can also alias this as well. So for instance, if there's some weird property shadowing or something that's happening, and you want to call it something different, You can create an alias on that.

[00:05:34]
>> Lukas Ruebbelke: So, outputs work similar, just in the opposite direction, and they are events. So this is very much, if you're comfortable with expression binding In Angular 1, this works very close to that. The main thing is, with Angular 1, we had Scope to emit events for us. With Angular 2, we do not have that mechanism, so we need the EventEmitter to handle that for us.

[00:06:02] So make sure that we import the EventEmitter. And then we use the output decorator to define that, hey, this thing is actually going to emit an event. And so, you can see here we've defined some value, and when this gets called, it's going to do that call back.

[00:06:20] So here we have, click calls greet, and within this greet method we are on the property, we defined as an output. So we're actually instantiating this as a new EventEmitter. So we're saying greeting is an EventEmitter, or greeter rather, and from here we're going to call greeter.emit. And so, fairly simple, you have EventEmitter.

[00:06:47] You call emit on that to surface the event to parent component. And then, in the parent component, and this is critical, you have MyComponent. Then greeter, which is the name of the output, which is just an event emitter, we're saying greeter equals greet. And we are saying the dollar event parameter.

[00:07:12] So whenever we admit something off of greeter, then it's going to call whatever we put into the attribute value of this particular property. In this case, we're calling greet.
>> Lukas Ruebbelke: Let me just hop into the code, we'll just see this real quick.
>> Speaker 5: There's a couple questions on that, what's that layout padding?

[00:07:43]
>> Lukas Ruebbelke: So that is, I'm using material design light because I like pretty things, and so that is, design light stuff, whenever I see pasted snippets in, I strip that out, so that's purely That's just material design stuff that's happening. Any other questions? You said questions, plural.
>> Speaker 5: Two people asking the same one and somebody says, are there day two plunks?

[00:08:18] Are all these links in the same one?
>> Lukas Ruebbelke: They're in the same link. [INAUDIBLE] .com/fem Hyphen plunks. Or you go to github.com/onehungrymind, they are in there as well. Simply because I've had Plunker go out on me at the worst possible times, namely my first Frontend Masters workshop, I am creating offline versions as well.

[00:08:46] So you can actually download them all at once And this is what you're seeing here. So we just went through, downloaded everything, and so they're online on Plunker. If you want to fork them, which is really handy, and look at a specific one, or you can download the entire set of Plunks.

[00:09:00] And we'll be adding to those as this workshop progresses. So I'd like to think that eventually this is going to be the ultimate repository of Angular 2 examples. So like a real Martha Steward cookbook for Angular is the point.
>> Scott Moss: So you're Martha Stewart in this.
>> Lukas Ruebbelke: I'm Martha, and he's Steward.

[00:09:23]
>> Scott Moss: All right.
>> Lukas Ruebbelke: Any questions on that? No, just kidding. All right, so output.
>> Lukas Ruebbelke: Just go through here real quick. Fire this up.
>> Lukas Ruebbelke: And this apparently is, wait. Did that go? It happened so fast I didn't even realize, click the button for a greeting. Child greeting emitted.

[00:10:11] Yay, I'm glad you are all sitting down for this.