Component interaction

As stated before, apps today use components to better structure the user interface. The idea is to break down the app to a set of encapsulated and reusable scoped components and avoid the primitive monolith approach.

Consequently, the user interface is built from a hierarchical component graph, comprising parent and child components. Often, this situation requires some sort of parent-child interaction control, such as the following:

• Parent needs to pass down input data to its child components
• Parent needs to respond when something occurs in a child component

Angular supports these two common scenarios using input and output.

Input

The @Input decorator is used when a component is supposed to receive data passed down from its parent. When a field or property is set as input, the parent can specify the value via standard assignment.

Let's use input in the category menu-related components:

1. Create the relevant model representations:
   1. Create a folder at src/app/model.
   2. Create a file...