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.
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:
- Create the relevant model representations:
- Create a folder at
src/app/model. - Create a file...
- Create a folder at