This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

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

>> Lukas Ruebbelke: So an input allows data to flow from a parent component to a child component. And we use the input directive or decorator to do this. So we'll see this in the child component. So in the child component, we're defining input [someValue]. Then on the parent template, we then expose that as a property and we bind to it.

[00:00:24] Now, if you wanted to bind to it as one name in the parent and then have it reference internally as something else, you can create an alias. This is actually not recommended, but if you needed to for some reason, you could. The point is on the child you say, here's my input using the input decorator.

[00:00:42] And then now that is a property that's available to the parent to bind to. So, let's look at this code here. We have MyComponent, and I'm trading an Input of greeting. So it's even being defined as a property. I'm defining a property called greeting and I'm exposing it via the input metadata.

>> Lukas Ruebbelke: And then you notice this property is also available internally to the child to be bound to. So tnhe rules of binding, internally they still work. But, now on the parent component, because we created a greeting input in the parent template we say, I wanna bind to this property or this input and I'm going to set it to this.

[00:01:33] So you can see here they're setting it, and so when this gets rendered the child component's gonna say what property do you have for me, it's like well, Hello child. We'll take that and that's what it'll bind to in the child template. So it's taking the value from the parent and binding to it in the child.

>> Lukas Ruebbelke: So output does the reverse, it exposes an EventEmitter property so that it can emit events. So just like when you click, the DOM is emitting a click event. By using EventEmitter we can create our own custom events. So inside a child component, using the output decorator, we're going to create an event called showValue, and so we instantiate it to New EventEmitter.

[00:02:26] And so now, essentially we've got this EventEmitter in place that when we're ready to fire it off, then we'll admit it. But on the parent, all we know is that we have an output of some value. And when this thing emits its event or it fires, we're gonna call handle value on the parent component.

[00:02:47] So here you can see that I have greeter, new EventEmitter. And then when somebody clicks on the template we're calling greet, which then calls this.greeter.emit, and it emits this string. And then on the parent component, it's saying whenever greeter fires call greet and pass the event, or whatever you pass up into the parent component for handling.

[00:03:18] Now I will say this has kind of bit me a few times. Is that when you're using an output the parameter for the method that you called, has to be event. So that's just kinda the way it works. So it's event on the template but then in, you can pass whatever you want when you call emit but this has to be here.

[00:03:41] For whatever reasons, I just had to go honking on it like give up, I'm just going back dollar event. And because you are in a sense passing an event, a custom event that then once it gets into your parent totally fine.