What is @Input() used for in Angular?

Question

I was studying the Create a feature component tutorial on angular.io and then I noticed the @Input decorator property:

Answer 1

In this example, hero-detail is a child component, it's meant to be inserted into a parent component which will have the 'hero' data, and that 'hero' data will be passed into the hero-detail component via the hero instance variable marked as an input by the @Input decorator.

Basically the syntax is:

Import the Hero interface from the hero.interface.ts file, this is the definition of the Hero class

import { Hero } from "./hero";

Use an Input decorator to make the following instance variable available to parent components to pass data down.

@Input()

The hero instance variable itself, which is of type Hero, the interface of which was imported above:

hero: Hero;

A parent component would use this hero-detail child component and pass the hero data into it by inserting it into the html template like this:

Where the parent component has an instance variable named 'hero', which contains the data, and that's passed into the hero-detail component.