69

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?

BinaryButterfly
  • 18,137
  • 13
  • 50
  • 91
5tka
  • 843
  • 1
  • 6
  • 7
  • Is it equivalent to use @Input('foo') and to use @Directive({ inputs:['foo'] }) ? If not how are they different? – John Henckel Jul 16 '18 at 17:47
  • Demo application to show data sharing between components using @input http://www.freakyjolly.com/example-app-share-data-between-angular-components-using-input-decorator/ – Code Spy Jul 18 '18 at 10:06
  • 21
    Not sure why this was closed. OP is obviously new to Angular, but the question is _very_ specific: What does the Angular `@Input` annotation mean, as used in the sample code shown above & taken from [the Angular tutorial link provided](https://angular.io/tutorial/toh-pt3#add-the-input-hero-property). No worse than [What do two question marks together mean in C#?](https://stackoverflow.com/questions/446835/what-do-two-question-marks-together-mean-in-c) with its 1372 upvotes. ;^) – ruffin Nov 19 '18 at 02:14

6 Answers6

50

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.

Stephen R. Smith
  • 3,310
  • 1
  • 25
  • 41
  • Thanks for the answer. I want to clarify, I understand correctly? That the indent indicates that where do I output the template element? I'm sorry if I did not form the question correctly.http://prntscr.com/g9y7wh – 5tka Aug 18 '17 at 07:20
  • In your example there, in the app.component, the selectedHero gets passed to the heroDetails @Input binding of the hero-detail child component in by way of the syntax of the app.component.html, and then the hero-detail component now has heroDetails in its own heroDetails instance variable, and the hero-detail.componeont.html template is doing a check with the *ngIf to make sure heroDetails actually has a value (if anything is in it, it returns true and the expression is executed), and if there is heroDetail data it displays in the hero-detail child component. – Stephen R. Smith Aug 18 '17 at 14:50
29

@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.

Ajay2707
  • 5,690
  • 6
  • 40
  • 58
Ali Turab Abbasi
  • 1,103
  • 8
  • 22
14

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();
}
Rob Monhemius
  • 4,822
  • 2
  • 17
  • 49
  • 2
    Best explanation I've found on what happens under the hood, and excellent way of building it up to how data is passed from parent to child component. This should be accepted answer ⭐ – Prid Nov 26 '20 at 19:57
  • Thank you. Now it clicked :) – Deepak D Nov 04 '21 at 14:37
9

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

Ojonugwa Jude Ochalifu
  • 26,627
  • 26
  • 120
  • 132
Karan Desai
  • 3,012
  • 5
  • 32
  • 66
2

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

Sumedh Deshpande
  • 526
  • 8
  • 9
0

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

jignesh kumar
  • 409
  • 1
  • 4
  • 6