Angular - 5.8- Summary of custom properties and event links

This short recap consolidates everything we just learned about custom properties and custom events. Components exchange data through two complementary decorators: @Input() for values flowing into the child, @Output() for events bubbling back up to the parent. Together they form Angular's unidirectional data flow.

What you should remember

• @Input() — declares a bindable property the parent can set via [property]="value" in its template.
• @Output() with an EventEmitter — declares an event the parent can listen to via (event)="handler($event)".
• Both decorators accept a string argument that becomes the public alias used in the parent template, while the class property keeps its own internal name.
• Aliases keep the public API stable when internal names need to change.

Picking the right tool is straightforward once you remember the direction of the data: anything that needs to land inside the child component is an input, anything the child needs to publish to the outside world is an output. Trying to mutate the parent state directly from the child — for instance by reaching out through a shared object — breaks the abstraction and quickly leads to bugs that are hard to track.

With this pattern mastered you can build composable trees of components where each piece has a clear contract: here is what I expect, here is what I emit. In the upcoming lessons we will reuse this pattern many times to wire the recipe app together, then we will look at how Angular isolates the styles of each component through view encapsulation.