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:

// src/app/hero-detail/hero-detail.component.ts import { Component, OnInit, Input } from '@angular/core'; import { Hero } from '../hero';  @Component({   selector: 'app-hero-detail',   templateUrl: './hero-detail.component.html',   styleUrls: ['./hero-detail.component.css'] }) export class HeroDetailComponent implements OnInit {   @Input() hero: Hero;    constructor() { }   ngOnInit() { } } 

What is @Input() and what is it used for?

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:

<hero-detail [hero]="hero"></hero-detail> 

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