This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Component Contracts" Lesson
[00:00:00]
>> Lukas: Are we getting sick of this diagram yet? It's just so fundamentally profound that this is the essence of components. So again, just to beat this [INAUDIBLE], by that I mean review and reinforce concepts. When we want to send information from a template to a class, we do that with an event binding.
[00:00:23] When we want to send data from a class to a template, we do that with property binding.
>> Lukas: So now the question is, what if we can do custom event binding and custom property binding? Because right now, all the events we have bound to have been strictly DOM events.
[00:00:49] But or as well as probably all the things that we have done property binding to have been known HTML attributes. Like for instance, source for an image or we've got some style binding for different things. These are things that we know about that exist in the spec. What if we actually wanted to bind to a custom property?
[00:01:15] Well, how would we do that? The answer is we can do it via output and input. And what this does is this simply establishes a component contract with our respective components. So that you say when I load this component, it will omit these outputs and it will accept these inputs, so this is very much like Angular 1.
[00:01:42] If you've used isolated scope, this is I think isolated scope in a much less confusing implementation. And so now let's imagine, if you remember that event's were on your left, properties were on your right. That an event really takes some user event and it outputs that to the template.
[00:02:15] And then the template takes some information and it inputs it into its respective template. So just keep that direction in mind. And so now let's look at it this way. This by the way, is a completely new diagram I did this morning, never been seen by human eyes except for mine until now.
[00:02:42]
>> Lukas: So when we pass properties from our class into our template, well, up to this point our template has had just regular HTML. But as we've seen, we can actually put other components via the DOM, via its selector into parent components. And so now what we can do is we can pass a property or data into a component template, which then can pass that via the selector into a child component via input.
[00:03:24] So just think of we're taking data or binding to it via the property binding. But what it's really doing is passing this data into the child component via an input declaration. Now at the same time, class, the child component class can output information as an event that gets captured by the parent component template.
[00:03:52] Which then via an event, because we are going to discuss an event, goes into the class or the parent component class. So what I want to call out here is that the surface area between a parent and a child component is the DOM. So when you want to add a child component to a parent component, you do it in its template.
[00:04:18] So for instance, we have items, items component, but we have two sub-components, item list and item detail. And how that gets in is we add it to the DOM via its selector, but we need to pass information into it. And so using property binding, we can pass information in which then goes into the child component via input.
[00:04:39] And then when somebody does something to the child component, some event we service that via output. So pretty simple, data goes in, events come out. So you can think of this really just an isolation as this continues to work as normal on the parent component. It's just event and property binding, but the difference is they are custom.
[00:05:05]
>> Lukas: And then on the child component, they are inputs and outputs.