This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Component Contracts" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Lukas Ruebbelke: And so what this does is this produces really a contract, or an API to your component. And, I just wanna jump here real quick.Lukas Ruebbelke It's when we look at, for instance, the item detail component, we know pretty quickly what the API, what the contract is for this, is that it has a saved event coming out.
[00:00:30] It has a cancelled event coming out and we are putting an item into it. So it's very clearly defined, this goes in and this comes out. So this is similar to an Angular 1. We had isolated scope on directives. And so this would be similar to just the 2A binding on the item.
[00:00:52] But then one of my favorite features in Angular 1 that I think was really confusing and a lot of people were not comfortable digging into was expression defined isolated scope, to where you can say I wanna fire this event or internally I'm gonna call this method. That's going to call some arbitrary method on the parent component.
[00:01:11] I don't care what it is. You can define it at runtime. And so ngClick is a really good example of this. When ngClick fires, what's that gonna call? Well, whatever expression you put in the attribute of ngClick, that's what gets evaluated and gets fired. And so we are seeing this similar kind of construct ported over via input and output.
[00:01:36] Let's see if I missed something here. So inputs/outputs, and it also acts as a visual aid. So really, when you have really nice, fine-grained components, with a clearly defined inputs and outputs, that is, in a sense, I see it as an API which is critical as you start to pass components around even a large project, and more importantly, across multiple projects.
[00:02:00] So it's very common when you are dealing in a large company or not even a large company. I would say any company where the supply size doesn't matter. Even two projects, you may want to actually pull out a set of components for a UI kit. And so similar to like UI Bootstrap or Angular material I've seen teams actually take that and extend that and create custom components that they then pass around and consume into their other projects so they don't have to go and rebuild those from scratch.
[00:02:31] So having clearly defined inputs and outputs, saying this is how this behaves in a predictable manner, makes this really nice for sharing these components among your team, other teams, or even if you're going to open-source it. When these things are defined, it makes for predictable behavior.