Hands-On Full-Stack Web Development with ASP.NET Core

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, category.ts, in the new model folder, with the following content:

export interface Category {  name: string;}

2. Use the re-export strategy to aggregate all model representations by creating a file called index.ts in the model folder with the following content:

export * from './category';

3. Open category-menu.component.ts and add the categories field as input:

import { Component, Input ...