Lesson Outline

Using @Input and @Output

At a basic level, a custom component is a great way to just modularise functionality in your application. Instead of coding some feature directly into a page, you can create it in a custom component instead and then include it where you want to use it:

<my-component></my-component>

This is what we did for the simple example we walked through in a previous lesson. We built a Motivator component that we could just drop anywhere and it would allow the user to interact with a bunch of pre-defined quotes.

Although this is useful in itself, there are more complex ways that we can design our components. Rather than just having a static component, we might allow it to accept some input:

<my-cool-list [items]="items"></my-cool-list>

This would allow us to pass in some data to the MyCoolList component, rather than having to hard code the data into the component. We might also want to detect when certain things happen inside of the component, and handle that outside of the component:

<my-cool-list (itemDeleted)="someFunction($event)"></my-cool-list>

This would allow us to listen for a custom itemDeleted event emitted from the custom component, and we could then pass that event onto a function we define in the parent component.