What is @Input() used for in Angular?

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?

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.

@Input() hero means that hero is a variable that is being passed on to this component from it's parent.e.g

<hero-detail [hero]="(object of hero)"> </hero-detail>

Here I am passing hero object to hero detail component from it's parent component.

1. @Input creates a attribute on the components selector

Using the @Input selector creates an attribute on the selector. So using @Input() hero_name: string in a child.component.ts would create an attribute called hero_name.

In parent.component.html this looks something like: <app-child hero_name='Batman'></app-child>.

In child.component.ts you would be able to access this value using this.hero_name.

2. use different names for @Input

@Input() hero_name: string is actually a shorthand for @Input('hero_name') hero_name: string. You could assign a different name if that is more convenient.

E.g.: @Input('hero_name') name: string.

In parent.component.html this looks something like: <app-child hero_name='Batman'></app-child>.

In child.component.ts you would be able to access this value using this.name.

3. combine it with property binding

If you combine this with property binding you can now get objects or whatever from your parent.component.ts and pass it to your child-component.ts.

Example:

child.component.ts

@Component({...})
export class ChildComponent {
  @Input('selected_hero') superhero: Hero;
  
  public some_function() {
    console.log(this.superhero);
  }
}

parent.component.html

<app-child [selected_hero]='hero'></app-child>

parent.component.ts

@Component({...})
export class ParentComponent {
  public hero: Hero = new Hero();
}

Simply, by using the input decorator you are telling angular that a variable named hero will take Hero object as input from 'HeroDetailComponent' and will be able to pass this Hero object to any of its child component. This is called Input Binding

the whole concept of @input have been discussed in the answer section herre but i had few doubts so adding them and answers as well

What is @input used for in angular?
@input is a decorator used for a parent component to child component communication

what is the parent and child component?

<component1-selector>
    <componenent2-selector>
    </component2-selector>
</componenent1-selector>

The parent-component =>component1 serves as the context for the child-component =>component2

since component2 lies within the context of component1 then component1 is parent and component 2 is child of component1

need of @input?
we need it by default we cant access component properties outside component

if child component is within parent why parent cant access all its properties?

because making all the properties bindable(by default) is not a good idea and this also helps the developer to keep track of properties that they are using for communication just by looking at @input decorator

for syntaxes and their explanation read this angular documentation link they have beautifully explained the concept

What is Input decorator?

Input decorator is used to creating custom properties, It makes available properties for other components.

Using Input decorator in angular and using this we can pass data from parent component to child component."

Use of Input Decorator:

Step 1: Create New Project Create Blank Project in angular using below command, Skip this step if you have already:

ng new angularDemo

Step 2: Add Components Now add two new components with name parent and child component, using below command

ng new g c parent 
ng new g c child

Step 3: Add parent Component To render our parent component HTML we need to include it to app.component.html file as HTML tag as shown below:

<div style="text-align:center">
	<h1>
		Welcome to {{ name }}!
	</h1>
	<hr>
	<app-parent></app-parent>
</div>

Step 4: HTML for Parent and Child Component Now suppose we have a scenario where we have to change the price from parent component and it should be effect on child component, so let’s do HTML for this as below:

HTML for parent component:

<h1>
  Parent component
</h1>

<input type="text"/>

<app-child></app-child>

HTML for child component:

<h1>
  Child component
</h1>
<h4>
  Current Price : {{newPrice}}
</h4>

In Parent HTML code we have added tag to use it as child component.

Step 5: Pass data using Input decorator Now, to make able child component to receive value from parent component we need to use Input decorator as follows in child.component.ts, see below code:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() public newPrice: string = '500';

  ngOnInit() {
  }

}

Step 6: Reference to the child component value Next, we need to make reference to the child component value, so update HTML as below in parent.component.ts as below:

<input type="text" #price (keyup)="onchange(price.value)"/>

<app-child [newPrice]="currentPrice"></app-child>

Now run application using ng serve command.

Read more here, https://www.tutscoder.com/post/input-decorator-angular