Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Component Contracts" 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:

Component contracts represent an agreement between software suppliers and consumers. Inputs and outputs are defined and enforce how the Component will be consumed.

Get Unlimited Access Now

Transcript from the "Component Contracts" Lesson

[00:00:00]
>> Lucas Ruebbelke: Our favorite graphic, with arrows. So we've seen this, template, metadata, class, events, properties.
>> Lucas Ruebbelke: Now I want you to think for a second, what'd it mean if we could take our properties and our events and make them totally custom. For instance right now we've been binding to the click event and the submit event.

[00:00:34] So remember you combine to really any dom event. But what if you wanted a specific event to your domain.
>> Lucas Ruebbelke: What would that look like? Well, exactly like in the other event or property binding. And how we accomplish that is with inputs and outputs. So when you're doing property binding, what are we doing?

[00:01:01] We're saying, I have this value that I want to pass to this element. You're passing it in, AKA, an input. So I mean, I think you would, the mental mouth of the direction makes sense. And when something happens on an element that you wanna capture, like a click, same thing.

[00:01:17] It's, like, I have this thing that I want to surface. Out of this component and put in to the parent component, so it's an outputter. And so now have this kind of unidirectional data flow between a parent component and a child component. And so we'll talk about kind of how they sit together in just a moment.

[00:01:39]
>> Lucas Ruebbelke: So we've seen that we can put components into an application via routes. But for the most part, most components will end up in your application. Because basically you've put a selector into a parent template. So if you have, for instance items list. Well, we want that to go into the items component.

[00:02:02] How do we get that in there. We take swiper, we put it into the template. So, the surface area between a child and a parent is at the template. Does that make sense? So when we want to instantiate, so we've been doing this since we created our components.

[00:02:18] What do we do? We just take the selector and drop it into either the home component has kind of been the one we've been targeting. But that's where they live, that's the surface area. So from the parent side, nothing changes. In terms of communicating to a child. They simply are passing in properties, pulling out events.

[00:02:41] Just like, if you're pulling in native properties, native dom events. But on the child component, what is a property binding from the parent to the child, internally is defined as an input. Now from the parent, what is considered an event is defined as an output on the child.

[00:03:08] So a child component over the any component but, in this case the child component. Defines what comes in and what goes out. And so, what are we doing here? We are creating essentially a component contract. A component contract, from a high level, it's an agreement between a developer and a user that this is how this is going to work.

[00:03:35] Well, inputs and outputs define that contract. It is essentially the API of that component. And so that essentially acts as a contract to any component that is going to consume it. Now, it also acts as a visual aid. So that we can infer what a component does just by looking at it's inputs and outputs.

[00:03:56] So think of input and output as the component API. So app items list, I can look at this. And because I know what property by are, and I understand the direction of them. I can say well, this list takes an input of items, and it has an output of selected and deleted.

[00:04:21] These are the properties that it wants, and these are the events it's going to emit when something happens. And so very clearly I can, one input, two outputs.